Vue项目优化&添加进度条效果&修改webpack默认配置&加载外部CDN&定制首页内容&路由懒加载

添加进度条

1.安装nprogress----npm install nprogress
2.导入进度条插件

//导入进度条插件
import NProgress from 'nprogress'
//导入进度条样式
import 'nprogress/nprogress.css'

3.在axios拦截器中开启关闭

//请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config => {
   
  //当进入request拦截器，表示发送了请求，我们就开启进度条
  NProgress.start()
  //必须返回config
  return config
})
//在response拦截器中，隐藏进度条
axios.interceptors.response.use(config =>{
   
  //当进入response拦截器，表示请求已经结束，我们就结束进度条
  NProgress.done()
  return config
})

生成打包报告

打包时，为了直观地发现项目中存在的问题，可以在打包时生成报告。生成报告的方式有两种：
① 通过命令行参数的形式生成报告

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

② 通过可视化的UI面板直接查看报告（推荐）
在可视化的UI面板中，通过控制台和分析面板，可以方便地看到项目中所存在的问题

移除所有的console信息

安装babel-plugin-transform-remove-console插件

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

在babel.config.js中配置插件信息

//项目发布阶段需要用到的babel插件
const productPlugins = []

//判断是开发还是发布阶段
if(process.env.NODE_ENV === 'production'){
   
  //发布阶段
  productPlugins.push("transform-remove-console")
}

module.exports = {
   
  "presets": [
    "@vue/app"
  ],
  "plugins": [
    [
      "component",
      {
   
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ...productPlugins
  ]
}

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

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

// vue.config.js
module.exports = {
   
  // 选项...
}

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

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

在 vue.config.js 导出的配置对象中，新增 configureWebpack 或 chainWebpack 节点，来自定义 webpack 的打包配置。
在这里， configureWebpack 和 chainWebpack 的作用相同，唯一的区别就是它们修改 webpack 配置的方 式不同：
① chainWebpack 通过链式编程的形式，来修改默认的 webpack 配置
② configureWebpack 通过操作对象的形式，来修改默认的 webpack 配置
https://cli.vuejs.org/zh/guide/webpack.html具体差异参考

module.exports = {
   
    chainWebpack:config=>{
   
        //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
   
            //entry找到默认的打包入口，调用clear则是删除默认的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js')
        })