使用Nprogress

• 下载依赖

npm install --save nprogress

• 使用依赖

在请求拦截器中显示进度条 Nprogress.start()

在响应拦截器中隐藏进度条 Nprogress.done();

• 引入依赖

import Nprogress from "nprogress";
import "nprogress/nprogress.css";

第一步

1. 打开package.json 添加"report": "vue-cli-service build --report"

2. 打开vue.config.js 修改打包入口文件

• configureWebpack和chainWebpack，来自定义webpack的打包配置configureWebpack和chainWebpack的作用完全相同
• configureWebpack：通过操作对象的形式来修改入口文件
• chainWebpack：通过链式编程的形式来修改入口文件

3. 修改index.html文件

• 在开发环境下，通过import来引入依赖。
• 在生产环境下，不使用import引入依赖，而是通过cdn来引入各种依赖，这样可以减小打包后依赖的体积。##### 使用变量isProd通过isProd区分开发环境和生产环境。如果是生产环境，则加载CDN。如果是开发环境，则不接在CDN文件。
• 在vue.config.js添加
• 在index.html中引入外部依赖
• 可以通过www.bootcdn.cn/ 来引入依赖
• 重点
• 第三方依赖启用CDN 在vue.config.js

路由懒加载

• 当打包创建项目时候，js包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
• 具体需要三步
• 安装 npm i @babel/plugin-syntax-dynamic-import包
• 在babel.config.js配置文件中声明该插件
• 将路由改为按需加载的形式，示例代码如下：
• 注意：webpackChunkName:'名字必须一致' 回合成一个文件夹

5. 开启gzip压缩 使用gzip减少文件体积，使传输速度更快

• 先创建一个文件夹(serve)，打开文件夹创建一个app.js(名随便起.js)再输入命令npm init -y， 进入app.js
• 下载命令 npm i express compression(可以分开下载) 会生成node_modules和package-lock.json

使用pm2管理应用

• 在服务器中安装pm2 npm i pm2 -g
• 启动项目 pm2 start 脚本 --name 自定义名称
• 查看运行项目 pm2 ls
• 重启项目 pm2 restart 自定义名称
• 停止项目 pm2 stop 自定义名称
• 删除项目 pm2 delete 自定义名称

vue ui 打开项目仪表盘

1. 进入任务列表
2. 点击report运行，会生成一个report.html在打包过后的项目中
3. 点击build运行，会打包成一个文件夹dist 把创建的文件serve上传到服务器中(不要node_modules，服务器会自动生成)

登录私人宝塔号

1. 点击网站，添加Node项目，先安装node
2. 打开文件，新建项目

• 进入新建的文件夹，把项目上传到文件夹中

3. 再回到网站，添加Node项目，把刚新建的文件夹上传
4. 点击安全，把添加项目中的端口号设置成开放，