打包项目的那些事

项目开发完成

打包 ：

• 用webpack做打包（把.vue, .js, .less ------> .js, .css, .html）

打包的优势

• 在保证功能的情况下，让文件尽可能的小
• 在保证功能的前提下，让我们的页面显示出来的速度更快一些

打包命令。

• npm run build:prod
  

• 打包之后，会得到dist目录，如果希望可以双击打开index.html，则需要提前在vue.config.js中配置：vue.config.js中
  

{
  	publicPath: './'
}

打包优化-路由懒加载

问题

{
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

上边 component: () => import('@/views/login/index')是什么意思呢？

与下边的写法有何不同？

const Login = import('@/views/login/index')
{
    path: '/login',
    component: Login,
    hidden: true
  },

什么是路由懒加载

一个路由对一个组件，表示一个页面。懒加载的意思是：只有在路由进入这个页面时，才去加载这个组件对应的资源。

路由懒加载中的魔法注释

通过在注释中指定webpackChunkName，可以人为设置这个文件的名字。如下是一个示例。

components = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue");