Vue项目上线相关配置

项目上线相关配置

1.通过node创建web服务器

创建node项目，并安装express,通过express快速创建web服务器，将vue项目打包所生成的dist文件夹，托管为静态资源即可。

1.1.创建vue-shop-server文件夹，并用vscod打开,将原项目的dist文件夹复制进来。在终端中输入：

npm i -y
npm i express -S

1. 2.创建app.js文件夹，并输入

const express = require('express')
const app = express()

app.use(express.static('./dist'))
app.listen(80,()=>{
    console.log('server running http://127.0.0.1')
})

1.3.启动

node app

2.开启gzip配置

使用gzip可以减小体积，使传输速度更快。
可以通过服务器端使用Express做gzip压缩，其配置如下

2.1安装相应的包

npm i compression -S

2.2 使用

//导入包
const compression = require('compression')
//启用中间件
// 一定要把这行代码，写到静态资源托管之前
app.use(compression()

3.配置HTTPS服务

为什么要使用HTTPS服务？

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

3.1 进入https://freessl.cn/官网，输入要申请的域名并选择品牌

3.2 输入自己邮箱，并选择相关项

3.3 验证DNS,在域名管理后台添加TXT记录

3.4 验证通过后，下载SSL证书（full_chain.pem公钥：private.key私钥）

3.5在后台项目中导入证书

const https = requrie('https')
const fs = require('fs')
const options = {
    cert:fs.readFileSync('./full_chain.pem'),
    key:fs.readFileSync('./private.key')
}
https.createServer(options,app).listen(443)

4.使用pm2管理应用

4.1在服务器中安装pm2

npm i pm2 -g

4.2启动项目

pm2 start脚本 --name自定义名称

4.3查看运行项目

pm2 ls

4.4重启项目

pm2 restart 自定义名称

4.5停止项目

pm2 stop 自定义名称

4.6删除项目

pm2 delete 自定义名称