vue项目优化上线(进度条、移除console、自定义打包入口、加载CDN资源、路由懒加载、通过node创建Web服务器、配置HTTPS服务、使用PM2管理应用)

项目优化

实现步骤：
A.生成打包报告，根据报告优化项目
B.第三方库启用CDN
C.Element-UI组件按需加载
D.路由懒加载
E.首页内容定制

1.添加进度条

给项目添加进度条效果，可以通过可视化ui面板先打开项目控制台，
打开依赖，安装nprogress,或者直接npm install 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")
 //必须返回config
 return config
  __________________})
  //在response拦截器中，隐藏进度条
  axios.interceptors.response.use(config =>{
  //当进入response拦截器，表示请求已经结束，我们就结束进度条
  NProgress.done()
  return config
  })

2.根据报错修改代码

根据ESLint的警告提示更改对应的代码,如果提示要在一行显示的话,如下图

这时可以在.prettierrc文件中更改设置"printWidth":200, 将每行代码的文字数量更改为200

{
    "semi":false,
    "singleQuote":true,
    "printWidth":200
}

3.执行build 解决生产发布阶段中的conlose

安装一个插件（babel-plugin-transform-remove-console）在项目build阶段移除所有的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
  ]
}

4.生成打包报告

①.打包时,为了直接地发现项目中存在的问题,可以在打包时生成报告,生成报告的方式有两种:
A.命令行形式生成打包报告
vue-cli-service build --report
B.在可视化ui 面板中的 控制台生成打包报告
点击“任务”=>“build”=>“运行”
运行完毕之后点击右侧“分析”，“控制台”面板查看报告

②.修改webpack的默认配置
默认情况下，vue-cli 3.0生成的项目，隐藏了webpack配置项，如果我们需要配置webpack
需要通过vue.config.js来配置。
在项目根目录中创建vue.config.js文件