打包发布
目标：明确打包的作用
说明：vue脚手架只是开发过程中，协助开发的工具，当真正开发完了，脚手架不参与上线
打包的作用：
- 将多个文件压缩合并成一个文件
- 语法降级
- less sass ts 语法解析
- ....
打包后，可以生成，浏览器能够直接运行的网页
命令：npm run build
打包完成后，你会在项目根目录下的dist文件夹中找到打包生成的文件。其中，index.html是你的应用的入口文件，js和css文件包含了你的应用程序的逻辑和样式。
结果：再项目的根目录会自动创建一个文件夹dist，文件就是打包后的文件，只需要放到服务器中即可。
配置：默认情况下，需要放到服务器根目录打开，如果希望双击运行，需要配置publicPath 配成相对路径
dist/
├── index.html
├── js/
│ ├── app.js
├── css/
│ ├── app.css
打包优化：路由懒加载
目标：配置路由懒加载，实现打包优化
说明：当打包构建应用时，javascript 包会变得非常大，影响页面加载，如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了
- 步骤一 异步组件改造
const ProDetail = () => import('@/views/prodetail')
const Pay = () => import('@/views/pay')
- 步骤二 路由中应用
const router = new VueRouter({
routes:[
......
{path:'/prodetail/:id',component:ProDetail},
{path:'/pay' , component:Pay}，
// 或者可以直接再规则中指定
{path: '/pay',component: () => import('@/views/pay/index.vue')}
]
})