Vue優化政策_項目上線_02

文章目錄

• ​​一、通過node建立web伺服器​​

• ​​1. 建立檔案夾​​
• ​​2. 初始化包管理配置檔案​​
• ​​3. 安裝express插件​​
• ​​4. 複制vue打包後dist​​
• ​​5. 建立app.js+配置​​
• ​​6. 運作項目并浏覽器通路​​

• ​​二、開啟gzip配置​​

• ​​2.1. 安裝插件​​
• ​​2.2. 配置插件​​
• ​​2.3. 運作項目并浏覽器通路​​

• ​​三、使用pm2管理應用​​

• ​​3.1. pm2常用指令​​
• ​​3.2. 安裝pm2​​
• ​​3.3. 使用pm2啟動項目​​
• ​​3.4. 使用pm2 重新啟動項目​​
• ​​3.5. 使用pm2 停止項目​​
• ​​3.5. 使用pm2 删除項目​​

一、通過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