62 - 综合案例 - 智慧商城-14 - 打包

一. 打包发布

1. 目标: 明确打包的作用

说明: vue脚手架只是开发过程中，协助开发的工具，当真正开发完了 =>脚手架不参与上线

打包的作用:
        ①. 将多个文件缩合并成一个文件
        ②. 语法降级
        ③. less sassts 语法解析
        ④. ...

打包后，可以生成，浏览器能够直接运行的网页 =>就是需要上线的源码!

2. 目标: 打包命令 和 配置

说明: vue脚手架工具已经提供了打包命令，直接使用即可。

命令: yarn build

结果 :在项目的根目录会自动创建一个文件夹 'dist', dist中的文件就是打包后的文件，只需要放到服务器中即可。

配置:默认情况下，需要放到服务器根目录打开，如果希望双击运行，需要配置publicPath 配成相对路径

  

3. 打包流程

        (1). 安装 yarn

npm install -g yarn

        (2). 配置yarn 环境变量

# 1. 黑窗口查找 yarn
where yarn 

# 2. 配置环境变量
C:\Users\Dell\AppData\Roaming\npm

       (3). 增加publicPath配置

               vue.config.js

// 增加publicPath配置,将项目路径改为相对路径
// 否则项目就是绝对路径
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: './', 
  transpileDependencies: true
})

        (4). 黑窗口执行打包命令

# 黑窗口中进入项目根目录,执行打包命令
# 因为PowerShell 脚本的执行有着严格的安全策略限制,在vcode中执行打包命令可能会报错
     yarn build

        (5). 自动生成dist目录

                直接在浏览器就可以运行,放到服务器也是只放这一个目录内容

二. 打包优化: 路由懒加载

目标:配置路由懒加载，实现打包优化
说明:当打包构建应用时，Javascript 包会变得非常大影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

官方链接: 路由懒加载 | Vue Router

1. 步骤一: 异步组件改造

const ProDetail = () => import('@/views/prodetail')
const Pay = () => import('@/views/pay')
...

2. 步骤二: 路由中应用

const router = new VueRouter({
    routes: [
        ...
        { path: '/prodetail/:id', component: ProDetail },
        { path: '/pay', component: Pay },
        ...
    ]
})

3. 代码示例

          router / index.js

        优化后再打包就会将页面分模块化,加载时会按需加载,提升性能

import Vue from 'vue'
import VueRouter from 'vue-router'

import Layout from '@/views/layout'
import Home from '@/views/layout/home'
import Caregory from '@/views/layout/category'
import Cart from '@/views/layout/cart'
import User from '@/views/layout/user'
import store from '@/store'



// import Login from '@/views/login/index.vue'
// 直接导入login文件,会自动找到index.vue
const Login = () => import('@/views/login')
const Search = () => import('@/views/search')
const SearchList = () => import('@/views/search/list')
const ProDetail = () => import('@/views/prodetail')
const Pay = () => import('@/views/pay')
const MyOrder = () => import('@/views/myorder')

Vue.use(VueRouter)

...

export default router