Vue專案上線環境部署,專案優化策略,生成打包報告,及上線相關配置
阿新 • • 發佈：2020-12-11
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 https://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 https://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 http://${hostname}:${port}/`);
});
2 . 執行專案
node ~/example.js &
# 一般會將寫好的nodejs專案進行如下編譯
cd admin-web
npm install --registry=https://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 http://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: http://localhost:5000 │
│ - On Your Network: http://192.168.43.84:5000 │
│ │
│ Copied local address to clipboard! │
│ │
└───────────────────────────────────────────────────┘