vue后台管理系统项目的优化和上线

1.安装进度条nprogress（优化）

步骤（1） 终端输入            npm install -- save nprogress 

步骤（2）在main.js里面进行配置：

 2.查看npm run serve里面的警告信息并解决警告信息，一般是ESLint的报错消息，我们照着报错位置去一个个改就可以了。

3.查看npm run build里面的警告信息并解决警告问题，一般的警告是不能在发布阶段代码中出现console.log()这种代码，安装开发依赖babel-plugin-transfrom-remove-console 并在babel.config.js里面配置下面的代码，就能在项目发布阶段删除全部的console.log() ，而在项目的开发阶段就不会删除console.log() 

 4.生成打包报告，通过 vue-cli-service build --report 来生成报告，我们可以看到这个项目中每个依赖所占的内存是多少，以此来进行优化

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

6.为开发模式与发布模式指定不同的打包入口，开发模式的入口文件为src/main-dev.js

发布模式的入口文件为src/main-prod.js  

7.通过externals 加载外部CDN资源，需要在public/index.html文件的头部，添加如下的CDN资源引用，

8.通过CDN优化Elementui的打包，

9.首页内容定制，不同的打包环境下，首页的内容不同，

10.路由懒加载，只有当路由被访问时才加载对应组件，这样就更加高效了，具体需要三步，

（1）安装@babel/plugin-syntax-dynamic-import 包(开发依赖）

（2）在babel.config.js配置文件中声明该插件

（3）将路由改为按需加载的形式，示例代码如下：

const Foo = () => import (/* webpackChunkName:"group-foo" */  './Foo.vue')

11.项目上线：

（1）通过node创建web服务器   

在vue_shop_server里面调用终端，输入npm init -y ,回车，输入npm i express -s

将vue_shop里面的dist文件复制粘贴到vue_shop_server ，在vue_shop_server 里面新建一个app.js文件，在里面输入 

（2）开启gzip配置 

a.可以通过服务端使用Express做gzip压缩 , 其配置如下：

在vue_shop_server里面安装npm i compression -s ，在app.js里面配置：

（3）配置https服务（一般是后端做）

在后台项目中导入证书，并在app.js里面输入

（4）使用pm2管理应用（用终端来开启本地服务器有点不稳定，所以我们用这个来开启服务器,有了这个pm2,就算关闭终端服务器，也可以看到后台管理项目）

a.在服务器安装pm2，在终端输入：npm i pm2 -g

b.启动项目：pm2 start  脚本 -- name 自定义名称       pm2 start .\app.js -- name web_vueshop

c.查看运行项目：pm2 ls                

d.重启项目：pm2 restart 自定义名称/id

e.停止项目:pm2 stop 自定义名称/id

f.删除项目：pm2 delete 自定义名称/id