Vue打包发布

打包发布

目标：明确打包的作用

说明：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')}
  ]
  })