vue项目实战笔记整理

项目优化

1、通过Nprogress添加进度条

// 导入Nprogress包对应的JS和CSS
import Nprogress from "nprogress";
import "nprogress/nprogress.css";
// 通过axios请求拦截器添加token 展示进度条   Nprogress.start();
axios.interceptors.request.use(config => {
  // 为请求头对象添加token验证的Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem("token");
  Nprogress.start();
  return config;
});
// 在response响应拦截器中设置隐藏进度条   Nprogress.done();
axios.interceptors.response.use(response => {
  Nprogress.done();
  return response;
});

2、在项目build期间移除所有的console

引入开发依赖：babel-plugin-transform-remove-console

因为在babel.js文件中的配置项是全局使用的，为了在开发阶段调试测试我们需要使用一些console，所以判断当前为开发阶段还是发布阶段

// 这是项目发布阶段需要用到的 babel 插件
const prodPlugins = [];
// 判断当前为开发阶段 development 还是发布阶段  production
if (process.env.NODE_ENV === "production") {
  prodPlugins.push("transform-remove-console");
}
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ],
    // 发布产品时候的插件数组,...表示展开运算符，意思是将数组里的每一项展开
    ...prodPlugins
  ]
};

3、为开发模式和发布模式指定不同的打包入口

先创建vue.config.js文件用来修改webpack的默认配置

默认情况下Vue的项目是共用一个打包入口文件（main.js） 为了将项目的开发过程和发布过程相分离，可以为各自指定打包入口文件

即main-dev.js main-prod.js

使用chainWebpack来自定义打包入口

4、通过externals加载外部CDN资源

默认情况下，通过import语法导入的第三方包会合并到同一个文件中，从而导致打包成功后文件体积过大。

使用webpack的externals节点来配置并加载外部的CDN资源，凡事声明在externals中的第三方依赖包都不会被打包

在vue.config.js文件添加如下配置

config.set("externals", {
        vue: "Vue",
        "vue-router": "VueRouter",
        axios: "axios",
        lodash: "_",
        echarts: "echarts",
        nprogress: "NProgress",
        "vue-quill-editor": "VueQuillEditor"
      });

注释掉main-prod.js中的js和css文件

将main-prod.js中的js和css文件引入到index.html中

5、自定制首页内容

在开发模式和发布模式下分别设置不同的标题内容即（dev-电商后台管理系统 电商后台管理系统）

首先在vue.config.js文件中分别配置plugin插件

// 发布模式
config.plugin("html").tap(args => {
        args[0].isProd = true;
        return args;
      });
 
      
     
// 开发模式
 config.plugin("html").tap(args => {
        args[0].isProd = false;
        return args;
      });

在index.html文件中的title标签中使用三元表达式式来判断开发模式和发布模式下的标题名称，使用 htmlWebpackPlugin.options.isProd这个属性，再将外部的CDN资源也使用这个属性进行判断.

6、路由懒加载

当项目打包构建时，JS包会变得非常大，影响页面加载，我们需要把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候加载对应组件.

以上图片内容来自https://www.bilibili.com/video/BV1Wz4y1f7Mx