VUE项目上线与优化

展示进度条
1.安装Nprogress

npm install --save nprogress

2.在main.js中导入js和css

import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'

3.在拦截中展示进度条 Nprogress.start()
4.在response拦截器中隐藏进度条 Nprogress.done()

axios.interceptors.response.use(config => {
     Nprogress.done();
return config;
});

babel-plugin-transform-remove-console 可移除console
1.安装插件

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

2.babelconfig.js中新增[]“transform-remove-console”
在发布阶段取消项目中的console开发调试阶段不取消
1.在babelconfig.js中
//这是项目发布阶段需要用到的babel插件

const prodPlugins = [];
if(process.env.NDDE_ENV === 'production'){
        prodPlugins.push('transform-remove-console')
}

//发布产品时候的插件数组
…prodPlugins

生成打包报告
1.通过命令行参数的形式生成报告
//–report 选项可以生成report.html以帮助分析包的内容

vue-cli-service build --report

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

通过vue.config.js 修改webpack的默认值
通过vue-cli3.0工具生成项目，默认隐藏了所有webpack的配置项，目的是为了屏蔽项目的配置过程，让程序员把工作的重心，放到具体功能和业务逻辑的是线上

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

configureWebpack和chainWebpack
在vue.config.js导出配置对象中，新增configureWebpack或chainWebpack节点，来自定义webpack的打包配置
在这里 configureWebpack 和chainwebpack 的作用相同，唯一的区别就是他们修改webpack配置的方式不同：
1.chainwebpack通过链式编程的形式，来修改默认的webpack
2.configureWebpack通过操作对象的形式，来修改默认的webpack配置

通过chainWebpack自定义打包入口

madule.exports = { 
     chainWebpack:config => {
       config.when(process.env.NODE_ENV === 'production',config => {
         config.entry('app').clear().add('./src/main-prod.js')
})
       config.when(process.env.NODE_NEV === 'development', config => {
           config.entry('app').clear().add('./src/main-dev.js')
})
}}

通过 externals 加载外部 CDN资源/优化体积过大的文件
默认情况下 通过import语法导入的第三方依赖包，最终会被打爆合并到同个文件中，从而导致打包成功后单个文件体积过大的问题
为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部的CDN资源。凡是声明在externals中的第三方依赖包中都不会被打包

config.set('externals',{
    vue:'vue',
    'vue-router':'VueRouter',
    axios:'axios',
    echarts:'echars',
    lodash:'_',
   nprogress:'Nprogress',
   'vue-quill-editor':'VueQuillEditor'
}

通过CDN优化ElementUI的打包
虽然在开发阶段，我们启用了Element-ui的组件的按需加载，尽可能的减少了打包的体积，但是那些被按需加载的组件。还是占用了较大的体积。此时，我们可以将Element-ui中的组件，也通过CDN的形式来加载，这样能够进一步减小打包后的文件体积。
1.在main-prod.js中，注释掉Element-ui按需加载的代码
2.在inde.html的头部区域中，通过CDN加载element-UI的js和css样式

首页内容定制

路由懒加载
1.安装@babel/plugin-syntax-dynamic-import包
2.在babel.config.js配置文件中声明该插件
3.将路由改为按需加载的形式，示例代码如下

项目上线相关配置
1.通过node创建web服务器
2.开启gzip配置
3.配置https服务
4.使用pm2管理应用

npm init -y初始化
npm i express -S安装第三方包
把原项目文件中的dist粘贴到新建的文件下
在新文件中新建app.js

npm i compression -S

写到静态资源托管前

app.use(compression())

3.配置https服务
为什么要启用https服务？
传统的Http协议传输的数据都是明文，不安全
采用https协议对传输的数据进行了加密处理，可以防止数据呗中间人窃取，使用更安全
申请hTTPs服务 申请SSL证书（https://freessl.org）
1.进入https://freessl.cn/官网，输入要申请的域名并选择品牌
2.输入自己的邮箱并选择相关选项
3.验证DNS（在域名管理后台添加TXT记录）
4.验证通过后，下载SSL证书（ful_chain.pem公钥；private.key私钥）

使用pm2管理项目上线
1.在服务器中安装pm2 ： npm i pm2 -g
2.启动项目：pm2start脚本 --name 自定义名称
3.查看运行项目：pm2 ls
4.重启项目：pm2 restart 自定义名称
5.停止项目：pm2 stop 自定义名称
6.删除项目：pm2 delete 自定义名称