打包及优化

1.1 执行命令打包:

• 用webpack做打包（把.vue, .js, .less -----------> .js, .css, .html）
• 在项目中都会提供命令： yarn build:prod

注:执行命令打包,要写yarn build:prod 或者将冒号后面的去掉

1.2 vue ui打包

终端执行vue ui 命令,会自动打开网页

2. 优化

2.1打包之后，会得到dist目录，如果希望可以双击打开index.html，则需要提前在vue.config.js中配置：vue.config.js中 { publicPath: './' }(解决白屏问题)

2.2使用路由懒加载

一个路由对一个组件，表示一个页面。

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

例 ,基本写法:

const Login = import('@/views/login/index')
{
    path: '/login',
    component: Login,
    hidden: true   //是否显示出来
  },

懒加载写法:

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

• 没设置路由懒加载前：所有页面对应的组件会全部打包到一个.js文件中
• 设置在路由懒加载后：页面对应的组件会全部打包到一个独立.js文件中，而且只有在进入这个路由页面之后才会加载。

注:还可使用路由懒加载中的魔法注释(神奇注释)

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

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

`