一.创建配置文件
1.在vue_shop同级创建一个文件夹vue_shop_frontend存放node服务器
2.使用终端打开vue_shop_frontend文件夹，输入命令npm init -y
3.初始化包之后，输入命令 npm i express -S
4.打开vue_shop目录，复制dist文件夹，粘贴到vue_shop_server中
在vue_shop_frontend文件夹中
5.创建app.js文件,编写代码如下：
const express = require('express')// 创建服务器const app = express()// 托管静态资源app.use(express.static('./dist'))// 启动服务器app.listen(8089, () => {console.log('server running at http://127.0.0.1:8089')})
6.然后再次在终端中输入node app.js
至此，http启动项目的方式配置完成
7.开启GZP压缩，减轻网络传输资源
// npm install compression -D const compression = require('compression')// 创建服务器const app = express()// 必须吧此行代码放在静态资源托管之前app.use(compression())
const express = require('express')// npm install compression -Dconst compression = require('compression')// 创建服务器const app = express()// 必须吧此行代码放在静态资源托管之前app.use(compression())// 托管静态资源app.use(express.static('./dist'))// 启动服务器app.listen(8089, () => {console.log('server running at http://127.0.0.1:8089')})
优化基本的配置完成，接下来在配置https
二.配置https服务
配置https服务一般是后台进行处理，前端开发人员了解即可。
首先，需要申请SSL证书，进入官网
在这里插入图片描述
将两个文件到vue_shop_server中
打开app.js文件，编写代码导入证书，并开启https服务
const https = require('https')const fs = require('fs')const options = {cert: fs.readFileSync('./full_chain.pem'),key: fs.readFileSync('./private.key')}https.createServer(options, app).listen(443)
const express = require('express')// npm install compression -Dconst 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'))// 启动服务器// app.listen(8089, () => {//console.log('server running at http://127.0.0.1:8089')// })https.createServer(options, app).listen(443)
三.使用pm2管理应用
打开vue_shop_server文件夹的终端，输入命令：npm i pm2 -g
使用pm2启动项目，在终端中输入命令：
pm2 start app.js --name 自定义名称查看项目列表命令：pm2 ls重启项目：pm2 restart 自定义名称停止项目：pm2 stop 自定义名称删除项目：pm2 delete 自定义名称
如果觉得《vue项目打包上线》对你有帮助，请点赞、收藏，并留下你的观点哦！
