vue项目打包

@[toc]

介绍

脚手架开发后的代码不能参与上线，要将代码进行打包，才能上线。
打包是什么？

• 将多个文件压缩合并成一个文件
• 语法降级
• less sass ts 语法解析, 解析成css

如何打包

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

npm run build

配置

module.exports = {
   
  // 设置获取.js,.css文件时，是以相对地址为基准的。
  // https://cli.vuejs.org/zh/config/#publicpath
  publicPath: './'
}

配置好以后，在本地就可以直接打开项目

懒加载

路由懒加载 & 异步组件， 不会一上来就将所有的组件都加载，而是访问到对应的路由了，才加载解析这个路由对应的所有组件
将路由文件中的代码改成以下样式：

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