Vue 項目上線到 Centos 系統

Vue 項目發布流程 linux版

一、通過node創建 Web 服務器

創建node項目，並安裝express，通過express快速創建web服務器，並將vue打包生成dist文件夾，托管為靜態資源

主要代碼如下：

const express = require('express')

//創建web服務器
const app = express()

//托管靜態資源
app.use(express.static('./dist'))

//啟動web服務器
app.listen(80,()=>{
   console.log('web server running at http://127.0.0.1') 
})

 

1）新建 發布文件夾 admin_vue_server

 

2）vs code 初始化包管理配置文件

npm init -y

 

 安裝 express 

npm i express -S

安裝完成后，把打包好的 dist 文件夾拷貝到 admin_vue_server中

 

 新建 app.js

const express = require('express')

//創建web服務器
const app = express()

//托管靜態資源
app.use(express.static('./dist'))

//啟動web服務器
app.listen(80,()=>{
   console.log('web server running at http://127.0.0.1') 
})

測試是否成功：

node ./app.js

瀏覽器中打開項目就啟動了

 

 

 二、開啟文件的ＧＺＩＰ網絡傳輸壓縮

 

 １、安裝compression

npm install compression -S

2、app.js添加如下 標紅 代碼：

const express = require('express')
const compression = require('compression')

//創建web服務器
const app = express()

//順序很重要，必須放在靜態資源托管之前
app.use(compression())
//托管靜態資源
app.use(express.static('./dist'))

//啟動web服務器
app.listen(8080,()=>{
   console.log('web server running at http://127.0.0.1') 
})

重新啟動項目，js實際加載會變小，實際73kb，加載了24kb，提高項目運行速度

 

 

三、使用pm2管理應用

 

 安裝：

npm i pm2 -g

啟動項目：

pm2 start "腳本" --name 自定義名稱

例如：

//啟動Netcore API項目

pm2 start "dotent testDemo.dll" --name testDemo

//啟動vue項目
pm2 start "node ./app.js" --name adminVue

查看運行的項目：

pm2 ls

重啟項目：

pm2 start 自定義名稱

停止項目：

pm2 stop 自定義名稱

刪除項目：

pm2 delete 自定義名稱