一. 打包发布
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