Vue項目上線環境部署,項目優化策略,生成打包報告,及上線相關配置

• 2020 年 12 月 11 日
• 筆記
• VUE, 前端

Node.js簡介

Node.js是一個基於Chrome V8引擎的JavaScript運行環境，用來方便快速地搭建易於擴展的網絡應用。Node.js使用了一個事件驅動、非阻塞式I/O的模型，使其輕量又高效，非常適合運行在分佈式設備的數據密集型的實時應用。Node.js的包管理器npm，是全球最大的開源庫生態系統。Node.js的典型應用場景包括：

• 實時應用：如在線聊天，實時通知推送等等（例如socket.io）。
• 分佈式應用：通過高效的並行I/O使用已有的數據。
• 工具類應用：海量的工具，小到前端壓縮部署（例如grunt），大到桌面圖形界面應用程序。
• 遊戲類應用：遊戲領域對實時和並發有很高的要求（例如網易的pomelo框架）。
• 利用穩定接口提升Web渲染能力
• 前後端編程語言環境統一：前端開發人員可以非常快速地切入到服務器端的開發（例如著名的純Javascript全棧式MEAN架構）。

部署Node.js環境

二進制安裝

該部署過程使用的安裝包是已編譯好的二進制文件,解壓之後,在bin文件夾就已存在node和npm,無需重複編譯.

下載解壓node.js安裝包

wget //nodejs.org/dist/v6.9.5/node-v6.9.5-linux-x64.tar.xz
tar xf node-v6.9.5-linux-x64.tar.xz 
ln -s /root/node-v6.9.5-linux-x64/bin/node /usr/local/bin/node
ln -s /root/node-v6.9.5-linux-x64/bin/npm /usr/local/bin/npm

# 查看版本
npm -v
3.10.10
node -v
v6.9.5

# 至此，Node.js環境已安裝完畢。軟件默認安裝在/root/node-v6.9.5-linux-x64/目錄下。

# 如果需要將軟件安裝到其他目錄(例如: /opt/node/下),執行下賣弄步驟
mkdir -p /opt/node/
mv /root/node-v6.9.5-linux-x64/* /opt/node/
rm -f /usr/local/bin/node
rm -f /usr/local/bin/npm
ln -s /opt/node/bin/node /usr/local/bin/node
ln -s /opt/node/bin/npm /usr/local/bin/npm

使用NVM安裝多版本

NVM（Node Version Manager）是Node.js的版本管理軟件，使您可以輕鬆在Node.js各個版本間進行切換。適用於長期做node開發的人員或有快速更新node版本、快速切換node版本的場景。

完成以下操作,使用NVM安裝多個Node.js版本

使用git將遠嗎克隆到~/.nvm目錄下,並檢查最新版本

yum install git
git clone //github.com/cnpm/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`

# 激活NVM
echo ". ~/.nvm/nvm.sh" >> /etc/profile
source /etc/profile

# 列出Node.js所有版本
nvm list-remote

# 安裝多個Node.js版本
nvm install v6.9.5
nvm install v7.4.0


# 運行nvm 1s查看已安裝的Node.js版本，當前使用的版本為v7.4.0。返回結果如下所示
nvm ls
->       v6.9.5
         system
unstable -> 6.9 (-> v6.9.5) (default)

部署測試項目

1 . 新建項目文件example.js

cd ~
vim  example.js
const http = require('http');
const hostname = '0.0.0.0';
const port = 3000;
const server = http.createServer((req, res) => { 
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Hello World\n');
}); 

server.listen(port, hostname, () => { 
    console.log(`Server running at //${hostname}:${port}/`);
});
  

2 . 運行項目

node ~/example.js &

# 一般會將寫好的nodejs項目進行如下編譯
cd admin-web
npm install --registry=//registry.npm.taobao.org
npm run build:prod

# 查看是否監聽項目端口,如果返回3000代表OK
ss -tnl
State       Recv-Q Send-Q Local Address:Port               Peer Address:Port              
LISTEN      0      128     *:80                  *:*                  
LISTEN      0      128     *:22                  *:*                  
LISTEN      0      128     *:3000                *:* 

項目優化策略

/*
		1. 生成項目報告
		2. 第三庫啟用CDN
		3. Element-UI組件按需加載
		4. 路由懶加載
		5. 首頁內容定製
*/

生成打包報告

打包時,為了直觀地發現項目中存在的問題,可以在打包時生成報告,生成報告的方式有兩種:

1.通過命令行參數的形式生成報告

// 通過 vue-cli的命令選項可以生成打包報告

// --report選項可以生成report.html以分析包內容
vue-cli-service build --report


// 通過可視化的UI面板直接查看報告(推薦)
		在可視化的UI面板,通過控制台和分析面板,可以方便的查看項目中所存在的問題

項目上線相關配置

安裝環境需要包

npm i express -S

上線環境配置

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

1.將打包好的dist目錄複製到你要部署的目錄,項目同級目錄創建app.js文件

const express = require('express')

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


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

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

node app.js

gzip壓縮

安裝對應包

npm install compression -D

使用pm2管理應用

npm i pm2 -g

// 啟動項目
pm2 start腳本  --name 自定義名稱
pm2 start ./app.js --name web_vuedemo

[PM2] Spawning PM2 daemon with pm2_home=/Users/youmen/.pm2
[PM2] PM2 Successfully daemonized
[PM2] Starting /Users/youmen/Music/vue-template/app.js in fork_mode (1 instance)
[PM2] Done.
┌────┬────────────────────┬──────────┬──────┬───────────┬──────────┬──────────┐
│ id │ name               │ mode     │ ↺    │ status    │ cpu      │ memory   │
├────┼────────────────────┼──────────┼──────┼───────────┼──────────┼──────────┤
│ 0  │ web_vuedemo        │ fork     │ 0    │ online    │ 0%       │ 12.6mb   │
└────┴────────────────────┴──────────┴──────┴───────────┴──────────┴──────────┘

// 查看運行項目
pm2 ls
┌────┬────────────────────┬──────────┬──────┬───────────┬──────────┬──────────┐
│ id │ name               │ mode     │ ↺    │ status    │ cpu      │ memory   │
├────┼────────────────────┼──────────┼──────┼───────────┼──────────┼──────────┤
│ 0  │ web_vuedemo        │ fork     │ 0    │ online    │ 0%       │ 34.5mb   │
└────┴────────────────────┴──────────┴──────┴───────────┴──────────┴──────────┘

// 重啟項目
pm2 restart 自定義名稱


// 停止項目
pm2 stop 自定義名稱(或者id)


// 刪除項目
pm2 

方式2 server

// 一般做預覽使用

npm install -g serve
serve -s dist

   ┌───────────────────────────────────────────────────┐
   │                                                   │
   │   Serving!                                        │
   │                                                   │
   │   - Local:            //localhost:5000       │
   │   - On Your Network:  //192.168.43.84:5000   │
   │                                                   │
   │   Copied local address to clipboard!              │
   │                                                   │
   └───────────────────────────────────────────────────┘