09-vue_shop后台管理系统的优化及部署

项目优化策略

1. 生成打包报告
2. 第三方库启用CDN
3. Element UI组件按需加载
4. 路由懒加载
5. 首页内容定制

添加进度条效果

https://github.com/rstacruz/nprogress

安装依赖

npm install --save 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.defaults.baseURL = 'https://lianghj.top:8888/api/private/v1/'

// 在 request 拦截器中展示进度条 NProgress.start()
// 设置axios请求拦截器
axios.interceptors.request.use((config) => {
   
  // console.log(config)
  config.headers.Authorization = window.sessionStorage.getItem('token')
  NProgress.start()
  return config
})

// 在 response 拦截器中关闭进度条 NProgress.done()
axios.interceptors.response.use((config) => {
   
  NProgress.done()
  return config
})

结果报错

babel-plugin-transform-remove-console

可视化面板中运行 build，出现4个警告，原因是 项目中 console.log() 没有清除掉

利用插件 babel-plugin-transform-remove-console 可以自动移除所有的 console

安装开发依赖

npm install babel-plugin-transform-remove-console --save-dev

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

如果所有的 console都注释掉了的话，就不会有警告，也就不需要使用这个插件了

因为是在babel.config.js中使用了这个插件，所以导致 开发 和 生产环境下的 console 都被清除了

解决办法：开发环境时mode 是 development，生产环境下 mode 是 production

// 这是项目发布阶段需要使用到的插件 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'
      }
    ],
    // 'transform-remove-console