【Vue】实战项目：电商后台管理系统（Element-UI）（九）项目优化+项目上线

1. 项目优化

1.1 网页顶部添加进度条效果

安装运行依赖nprogresst
https://github.com/rstacruz/nprogress

main.js 导入并配置拦截器

// 导入 NProgress
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

import axios from 'axios'
// 配置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// 通过axios请求拦截器添加token，保证拥有获取数据的权限
// 在 request 拦截器中，展示进度条 NProgress.start()
axios.interceptors.request.use(config => {
   
  // 为请求头对象，添加 Token 验证的 Authorization 字段
  // console.log(config)
  NProgress.start()
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 在最后必须 return config
  return config
})
// 在 response 拦截器中，隐藏进度条 NProgress.done()
axios.interceptors.response.use(config => {
   
  NProgress.done()
  return config
})

1.2 console问题

1.2.1 在执行build命令期间移除所有console

安装开发依赖babel-plugin-transform-remove-console

babel.config.js

module.exports = {
   
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'component',
      {
   
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    ['transform-remove-console']
  ]
}

1.2.2 只在发布阶段移除所有的console

// 这是项目发布阶段需要用到的 babel 插件
const prodPlugins = []
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]
  ]
}

1.3 生成打包报告

打包时，为了直观地发现项目中存在的问题，可以在打包时生成报告，生成报告的方式有两种

1.3.1 通过命令行参数的形式生成报告

// 通过 vue-cli 的命令选项可以生成打包报告
// --report 选项可以生成 report.html 以帮助分析包内容
vue-cli-service build --report

1.3.2 通过可视化UI面板直接生成并查看报告（推荐使用）

控制台-分析面板

1.4 修改webpack配置

通过 vue-cli 3.0 工具生成的项目，默认隐藏了所有 webpack 的配置项，目的是为了屏蔽项目的配置过程，让程序员把工作的重心，放到具体功能和业务逻辑的实现上

如果程序员有修改 webpack 默认配置的需求，可以在项目根目录中，按需创建 vue.config.js 这个配置文件，从而对项目的打包发布过程做自定义的配置（具体配置参考 https://cli.vuejs.org/zh/config/#vue-config-js）。

// vue.config.js
// 这个文件中，应该导出一个包含了自定义配置选项的对象
module.exports = {
   
	// 选项...
}

1.4.1 为开发模式与发布模式指定不同的打包入口

默认情况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件（即 src/main.js）。为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即：
①开发模式的入口文件为 src/main-dev.js
②发布模式的入口文件为 src/main-prod.js

1.4.2 configureWebpack 与chainWebpack 作用相同用法不同

在 vue.config.js 导出的配置对象中，新增 configureWebpack 或 chainWebpack 节点，来自定义 webpack 的打包配置。

configureWebpack 和 chainWebpack 的作用相同，唯一的区别就是它们修改 webpack 配置的方式不同：

①chainWebpack 通过链式编程的形式，来修改默认的 webpack 配置
②configureWebpack 通过操作对象的形式，来修改默认的 webpack 配置

两者具体的使用差异，可参考如下网址： https://cli.vuejs.org/zh/guide/webpack.html#webpack-%E7%9B%B8%E5%85%B3

1.4.3 通过chainWebpack自定义打包

module.exports = {
   
  chainWebpack: config => {
   
    config.when(process.env.NODE_ENV === 'production', config =>