Vue优化策略_项目上线_02

接上一篇：Vue优化策略_项目发布_01
https://gblfy.blog.csdn.net/article/details/105359879

一、通过node创建web服务器

1. 创建文件夹

mkdir web_server

2. 初始化包管理配置文件

#进入cd web_server
npm init -y

3. 安装express插件

npm i express -S

4. 复制vue打包后dist

将vue项目打包后的dist文件夹,复制到web_server目录下面

5. 创建app.js+配置

#创建app.js
echo "express" >> app.js

#配置如下

// 1.导入express
const express = require('express')
// 2.调用express函数返回得到一个web服务器
const app = express()


// 3.注册express中间件，并设置托管的静态文件目录
app.use(express.static('./dist'))

// 4. 启动服务器，默认端口80，并设置回调函数，当服务器启动后输出'server running at http://127.0.0.1'
app.listen(80, () => {
  console.log('server running at http://127.0.0.1')
})

6. 运行项目并浏览器访问

node ./app.js

http://127.0.0.1

二、开启gzip配置

使用gzip可以减小文件体积，使传输速度更快。

2.1. 安装插件

npm i compression -S

2.2. 配置插件

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

2.3. 运行项目并浏览器访问

node ./app.js

http://127.0.0.1

在这里插入代码片

三、使用pm2管理应用

3.1. pm2常用命令

功能	命令
在服务器上安装pm2	npm i pm2 -g
启动项目	pm2 start 脚本 --name 自定义名称
查看正在运行的项目	pm2 ls
重启项目	pm2 restart 自定义名称或者id
停止项目	pm2 stop 自定义名称或者id
删除项目	pm2 delete 自定义名称或者id

3.2. 安装pm2

npm i pm2 -g

3.3. 使用pm2启动项目

#进入到web_server目录下面，在终端终中执行以下命令：
pm2 start ./app.js --name web_server

3.4. 使用pm2 重新启动项目

#进入到web_server目录下面，在终端终中执行以下命令：
pm2 restart ./app.js --name web_server

3.5. 使用pm2 停止项目

#进入到web_server目录下面，在终端终中执行以下命令：
pm2 stop ./app.js --name web_server

3.5. 使用pm2 删除项目

#进入到web_server目录下面，在终端终中执行以下命令：
pm2 delete ./app.js --name web_server