这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天
0.页面切换进度条
npm install --save nprogress
NProgress.start();//显示进度条
NProgress.done();//隐藏进度条
这两个函数分别在axios拦截器的钩子函数中进行调用
// 在request拦截器中展示进度条
axios.interceptors.request.use((config) => {
config.headers.Authorization = window.sessionStorage.getItem('token')
NProgress.start() //显示进度条
return config
})
// 在response拦截器中隐藏进度条
axios.interceptors.response.use((config) => {
NProgress.done() //隐藏进度条
return config
})
1. 生成打包报告
生成打包报告的方式有两种
vue-cli-service build --report
//--report选项可以生成report.html以帮助分析包内容
vue ui
2.第三方库启用 CDN
默认情况下，通过 import 语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。
为了解决上述问题，可以通过 webpack的 externals节点，来配置并加载外部的 CDN 资源。凡是声明在externals 中的第三方依赖包，都不会被打包。
导入时需要注意版本号，不可直接照搬
3. ElementUl组件按需加载
虽然在开发阶段，我们启用了element-ui组件的按需加载，尽可能的减少了打包的体积，但是那些被按需加
载的组件，还是占用了较大的文件体积。此时，我们可以将 element-ui 中的组件，也通过 CDN 的形式来加
载，这样能够进一步减小打包后的文件体积。
具体操作流程如下：
① 在 main-prod.js 中，注释掉 element-ui 按需加载的代码
② 在 index.html 的头部区域中，通过 CDN 加载 element-ui的js 和 css 样式
这样做有两个优点：1、用户体验更好2、从自己服务器请求的东西更轻量，响应得更快
4. 路由懒加载
当打包构建项目时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
具体需要 3 步：
① 安装 @babel/plugin-syntax-dynamic-import 包。
②在 babel.config.js配置文件中声明该插件。
③ 将路由改为按需加载的形式，示例代码如下：
const Foo = () => import (/* webpackChunkName: "group-foo"*/'./Foo. vue")
const Bar = () => import(/* webpackChunkName: "group-foo"*/./Bar. vue")
const Baz = () => import (/* webpackChunkName: "group-boo"*/'./Baz. vue")
关于路由懒加载的详细文档，可参考如下链接：
用法如下：
5.首页内容定制
不同的打包环境下，首页内容可能会有所不同。我们可以通过插件的方式进行定制，插件配置如下：
在public/index.html首页中，可以根据isProd的值，来决定如何渲染页面结构：
如果是开发模式就没必要用cdn加载资源
6.移除console内容
npm instal1 babel-plugin-transform-remove-console --save-dev
// 发布阶段才去掉console，开发和测试阶段不需要去掉
const prodPlugin = []
if (process.env.NODE_ENV === 'production')
prodPlugin.push('transform-remove-console')
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk',
},
],
...prodPlugin,
],
}
7.修改webpack
通过 vue-cli 3.0工具生成的项目，默认隐藏了所有webpack的配置项，目的是为了屏蔽项目的配置过程，让程序员把工作的重心，放到具体功能和业务逻辑的实现上。
如果程序员有修改 webpack默认配置的需求，可以在项目根目录中，按需创建 vue.config.js 这个配置文件，从而对项目的打包发布过程做自定义的配置（具体配置参考cli.vuejs.org/zh/config/#…）。
默认情况下， Vue项目的开发模式与发布模式，共用同一个打包的入口文件（即src/main.js） 。为了将项目
的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即：
①开发模式的入口文件为 src/main-dev.js
② 发布模式的入口文件为 src/main-prod.js
configureWebpack 和 chainWebpack
在 vue.config.js 导出的配置对象中，新增 configureWebpack 或 chainWebpack 节点，来自定义 webpack
的打包配置。
在这里， configureWebpack和chainWebpack的作用相同，唯一的区别就是它们修改webpack配置的方
式不同：
① chainWebpack通过链式编程的形式，来修改默认的 webpack 配置
② configureWebpack通过操作对象的形式，来修改默认的 webpack配置
两者具体的使用差异，可参考如下网址：
项目上线
1. 通过 node 创建 web 服务器。
创建 node项目，并安装express，通过express快速创建 web服务器，将vue打包生成的dist文件夹，托管为静态资源即可，关键代码如下：
npm init -y
npm i express -S
将打包生成的dist目录拷贝到server文件夹下，然后新建app.js文件输入以下代码：
2. 开启 gzip 配置。
使用gzip可以减小文件体积，使传输速度更快。
② 可以通过服务器端使用 Express 做 gzip 压缩。其配置如下：
ps：启用中间件一定要在静态资源托管之前
3. 配置 https 服务。（一般由后端同学完成）
为什么要启用 HTTPS 服务？
传统的 HTTP 协议传输的数据都是明文，不安全采用 HTTPS 协议对传输的数据进行了加密处理，可以防止数据被中间人窃取，使用更安全
申请SSL证书（ freessl.org）
① 进入 freessl.cn/官网，输入要申请的域名并选择品牌。
② 输入自己的邮箱并选择相关选项。
③验证DNS（在域名管理后台添加TXT记录）.
④ 验证通过之后，下载SSL证书（full_chain.pem 公钥；private.key私钥）。
在后台项目中导入证书
4. 使用 pm2 管理应用。
① 在服务器中安装 pm2：npmipm2-g
② 启动项目：pm2 start脚本--name 自定义名称
③查看运行项目：pm2Is
④重启项目：pm2 restart自定义名称
⑤ 停止项目：pm2 stop 自定义名称
⑥ 删除项目：pm2 delete 自定义名称
