vue项目正确打包

打包前准备工作

1. 安装进度条依赖 nprogress

打开main.js 添加配置

//导入进度条插件---------------👇
import NProgress from 'nprogress'
//导入进度条样式
import 'nprogress/nprogress.css'
//---------------------------👆
请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config => {

//--------------👇
  //当进入request拦截器，表示发送了请求，我们就开启进度条
  NProgress.start()
//-------------👆

  //为请求头对象，添加token验证的Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem("token")
  
//--------------👇
	//当进入response拦截器，表示请求已经结束，我们就结束进度条
  NProgress.done()
//-------------👆

  //必须返回config
  return config
})

2. 进行项目打包

	在vue控制台生成打包报告
	点击“任务”=>“build”=>“运行”
	运行完毕之后点击右侧“分析”，“控制台”面板查看报告

• 如果页面白屏或者白屏时间过长，他的原因是：资源过大

项目优化

1. 通过vue.config.js 修改 webpack 的默认配置

在项目的根目录中，按需创建 vue.config.js 这个配置文件，从而对项目的打包发布过程做自定义的配置

module.exports = {
  //部署应用包时的基本 URL  公共资源自动加上路径
  publicPath: "./",
  //改变打包后文件夹的名字
  // outputDir: "dist",

	//更改入口文件
  chainWebpack: confing => {
    //when判断当前环境条件，配置  process.env.NODE_ENV
    //发布模式 production
    confing.when(process.env.NODE_ENV === "production", confing => {
      // entry 找到当前默认的打包入口，调用clear清空默认打包入口，使用add添加新的打包入口
      //add方法后面参数为新的入口文件 地址
      confing.entry('app').clear().add('./src/main-prod.js')
    });
    //开发模式 development
    confing.when(process.env.NODE_ENV === "development", confing => {
      confing.entry('app').clear().add('./src/main-dev.js')
    })
  }


}

在src中复制两次main文件
重命名为：
发布模式入口文件main-prod.js
开发模式入口文件main-dev.js。 并删除原有的main.js

操作完，运行一下项目，避免写完因为某些原因产生报错而找不到！

2. CDN资源引入

在刚才的vue.config.js的发布模式入口中引入

通过CDN的方法引入，下方配置的东西就能直接用，没有的话就去node_modules上找

// externals以对象的形式去传
      confing.set('externals', {
        // 通过CDN的方法引入 有的话直接用，没有的话去node_modules上找
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })

接下来去public下的index.html中配置需要引入Url

//举栗子：
	<!-- nprogress 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
    <!-- 富文本编辑器 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
    <!-- element-ui 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" />

    <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
    <!-- 富文本编辑器的 js 文件 -->
    <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>

复制链接在浏览器中打开
打开package.json，根据插件名+版本号 浏览器搜索

如果找到就代表可以使用，一定要使CDN对应package.json里的版本号

在main-prod.js中注释掉CDN引入的插件

3. 最后一步路由懒加载

/* webpackChunkName:“roles” */ 把模块分类

{
        path: '/roles',
        name: 'roles',
        component: () => import( /* webpackChunkName:"roles" */ '@/components/roles/Roles.vue'),
        meta: {
          break: ['权限管理', '角色列表'],
        }
      },