Vue项目实战之电商后台管理系统(九) 项目优化部署上线

前言

一、项目优化

1.1 生成打包报告，根据报告优化项目

打包时，为了直观地发现项目中存在的问题，可以在打包时生成报告。
生成报告的方式有两种：
        1、命令行形式生成打包报告：vue-cli-service build --report
        2、在vue控制台生成打包报告：
                点击“任务”=>“build”=>“运行”
                运行完毕之后点击右侧“分析”，“控制台”面板查看报告
                在可视化的UI面板中，通过控制台和分析面板，可以方便地看到项目中所存在的问题。

1.2 通过 externals 加载外部 CDN 资源

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

在项目根目录下新建vue.config.js文件，代码如下：

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

设置好排除之后，可以将main.js中的引入代码删除，然后打开public/index.html添加外部cdn引入代码：

 <!-- nprogress 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
<!-- 富文本编辑器 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />

<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<!-- 富文本编辑器的 js 文件 -->
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-quill-editor.js"></script>

1.3 Element-UI组件按需加载

虽然在开发阶段，我们启用了 element-ui 组件的按需加载，尽可能的减少了打包的体积，但是那些被按需加载的组件，还是占用了较大的文件体积。
此时，我们可以将 element-ui 中的组件，也通过 CDN 的形式来加载，这样能够进一步减小打包后的文件体积。

具体操作流程如下：

      1、在 main.js中，删掉导入 element-ui 的代码 
      2、在 index.html 的头部区域中，通过 CDN 加载 element-ui 的 js 和 css 样式
		<!-- element-ui 的样式表文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" />

		<!-- element-ui 的 js 文件 -->
		<script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>

1.4 路由懒加载

懒加载的原理是把不同路由对应的组件分割成不同的代码块，当路由被访问的时候才加载对应组件，这样可以提高效率
具体需要 3 步：

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

示例代码如下：

 // import Login from './components/Login.vue'
const Login = () => import('./components/Login.vue')
// import Home from './components/Home.vue'
const Home = () => import('./components/Home.vue')
// import Welcome from './components/Welcome.vue'
const Welcome = () => import('./components/Welcome.vue')

1.5 添加进度条

先安装运行依赖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
})

1.6 修改webpack的默认配置

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

1.6.1 为开发模式与发布模式指定不同的打包入口

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

1、开发模式的入口文件为 src/main-dev.js 
2、发布模式的入口文件为 src/main-prod.js

在vue.config.js中配置：

module.exports = {
    chainWebpack:config=>{
        //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默认的打包入口，调用clear则是删除默认的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js')
        })
        //开发模式
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}
注意：chainWebpack是通过链式编程的形式来修改webpack配置

二、项目上线

2.1 通过 node 创建 web 服务器

    1、创建一个文件夹vue_shop_server存放node服务器
    2、使用终端打开vue_shop_server文件夹，输入命令 npm init -y
    3、初始化包之后，输入命令 npm i express -S
    4、打开vue_shop目录，复制dist文件夹，粘贴到vue_shop_server中
    5、在vue_shop_server文件夹中创建app.js文件,编写代码如下：
            const express = require('express')
            // 创建 web 服务器
            const app = express()
             // 托管静态资源
            app.use(express.static('./dist'))
            // 启动 web 服务器
            app.listen(8998,()=>{
                console.log("server running at http://127.0.0.1:8998")
            })
    6、最后在终端中输入  node app.js 启动服务器

2.2 开启 gzip 配置

使用 gzip 可以减小文件体积，使传输速度更快。
打开终端，输入命令：npm i compression -D
打开app.js,编写代码：

 // 导入包 
const compression = require('compression'); 
// 启用中间件 
app.use(compression());

2.3 配置 https 服务

    传统的 HTTP 协议传输的数据都是明文，不安全
    采用 HTTPS 协议对传输的数据进行了加密处理，可以防止数据被中间人窃取，使用更安全

2.3.1 申请 SSL 证书（https://freessl.org）

    1、进入 https://freessl.cn/ 官网，输入要申请的域名并选择品牌
    2、输入自己的邮箱并选择相关选项 
    3、验证 DNS（在域名管理后台添加 TXT 记录）
    4、验证通过之后，下载 SSL 证书（ full_chain.pem 公钥；private.key 私钥）

2.3.2 在后台项目中导入证书

打开app.js文件，编写代码导入证书，并开启https服务：

const express = require('express')
const compression = require('compression')
const https = require('https')
const fs = require('fs')

const app = express()
//创建配置对象设置公钥和私钥
const options = {
    cert:fs.readFileSync('./full_chain.pem'),
    key:fs.readFileSync('./private.key')
}

app.use(compression())
app.use(express.static('./dist'))

//启动https服务
https.createServer(options,app).listen(443)

2.4 使用 pm2 管理应用

打开vue_shop_server文件夹的终端，输入命令：npm i pm2 -g
使用pm2启动项目，在终端中输入命令：pm2 start app.js --name 自定义名称
查看项目列表命令：pm2 ls
重启项目：pm2 restart 自定义名称
停止项目：pm2 stop 自定义名称
删除项目：pm2 delete 自定义名称

总结

今天的内容主要是项目优化相关的知识，通过优化可以提高项目运行速度，减小项目体积，这在以后开发大型项目时非常有用，值得学习。