Vue项目上线

项目上线相关配置

• 通过 node 创建 web 服务器
• 开启 gzip 文件传输压缩
• 开启 https 传输协议，使得传输过程更加安全
• 使用 pm2 管理网站上的所有引用

通过 node 创建 web 服务器
创建 node 项目，并安装 express，通过 express 快速创建 web 服务器，将 vue 打包生成的 dist 文件夹，托管为静态资源即可，关键代码如下：

在根目录新建 vue_shop_server 文件夹
在终端 npm init -y 初始化一个包管理配置文件
npm i express -S 安装第三方包 express
把 vue_shop 文件夹中打包生成的 dist 文件 copy 到 vue_shop_server 文件夹
vue_shop_server项目下新建一个app.js 入口文件，写入以下代码
在终端 运行 node .\app.js

// 导入 express
const express = require('express')
// 创建 web 服务器
const app = express()
// 通过app.use注册中间间
// 将指定的目录，托管静态资源
app.use(express.static('./dist'))
// 监听 80 端口 启动 web 服务器
app.listen(80,()=>{
	console.log('web server running at http://127.0.0.1')
})

开启 gzip 文件传输压缩
**目的：**使用 gzip 可以减小文件体积，使传输速度更快。可以在浏览器控制台中的Network中查看具体变化。
可以通过服务器端使用 Express 做 gzip 压缩。其配置如下：

安装相应包 npm install compression -D
导入包 const compression = require(‘compression’);
启用（注册）中间件 app.use( compression( ) ) 注意：这段代码一定要放在静态资源托管（app.use( express.static(’./dist’) )）之前，否则gzip不会生效。
完成后可以去浏览器控制台 Network 中查看具体变化

配置 开启 https 传输协议，使得传输过程更加安全
传统的 HTTP 协议传输的数据都是明文，不安全
采用 HTTPS 协议对传输的数据进行了加密处理，可以数据被中间人窃取，使用更安全
配置 HTTPS 服务需要申请 SSL 证书（https://freessl.org）（企业）需要收费

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

// 引入 https 模块
const https = require('https');
// 引入 fs 文件操作模块
const fs = require('fs');
// 创建配置对象
const optinos = {
	// 公钥
	cert:fs.readFileSync('./full_chain.pem'),
	// 私钥
	key:fs.readFileSync('./private.key')
}
// 默认情况下 http 协议 80 端口，https 协议 443 端口
https.createServer(options,app).listen(443);

使用 pm2 管理网站上的所有引用
**原因：**终端窗口开启过多，难以管理
**目的：**在开启 web 网站之后，关闭终端窗口之后，网站可以正常的运行

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