使用npm run build:prod命令來(lái)構(gòu)建生產(chǎn)環(huán)境的版本。構(gòu)建完成后锄奢，使用pm2來(lái)啟動(dòng)應(yīng)用季希。pm2是一個(gè)流行的進(jìn)程管理器，可以幫助管理和保持應(yīng)用持續(xù)運(yùn)行半醉。
以下是如何使用npm run build:prod和pm2來(lái)構(gòu)建并啟動(dòng)你的Vue應(yīng)用的步驟：
1疚俱、npm run build:prod，這個(gè)命令會(huì)根據(jù)vue.config.js中的配置（如果有的話）和package.json中的scripts部分來(lái)構(gòu)建你的應(yīng)用缩多。構(gòu)建的結(jié)果通常會(huì)放在dist目錄下呆奕。
2夯尽、構(gòu)建完成后，你可以使用pm2來(lái)啟動(dòng)你的應(yīng)用登馒。首先，確保你已經(jīng)安裝了pm2咆槽。如果沒(méi)有安裝陈轿，可以通過(guò)以下命令安裝：npm install pm2 -g
然后，創(chuàng)建一個(gè)pm2.config.js文件在你的項(xiàng)目根目錄下秦忿，配置你的應(yīng)用啟動(dòng)腳本麦射。
3、啟動(dòng)應(yīng)用灯谣。pm2 start pm2.config.js這個(gè)命令會(huì)根據(jù)pm2.config.js中的配置啟動(dòng)你的應(yīng)用潜秋。
4、pm2 list查看應(yīng)用狀態(tài)
online的代表已經(jīng)正常啟動(dòng)胎许，name是pm2.config.js中的name字段配置的應(yīng)用名稱峻呛。
以上項(xiàng)目已經(jīng)打包進(jìn)了dist文件夾下，并且本地也啟動(dòng)了命令辜窑。
如果用live-server的方式訪問(wèn)dist的話钩述，直接進(jìn)入dist文件夾 輸入live server 就能啟動(dòng)訪問(wèn)到打包后的項(xiàng)目
如果用本地nginx訪問(wèn)本地啟動(dòng)的項(xiàng)目，那么我們需要配置下nginx
我本地的nginx路徑是/usr/local/etc/nginx
然后進(jìn)入nginx.conf進(jìn)行配置
server {
? ? listen 8088; 我本地項(xiàng)目啟動(dòng)是8088端口
? ? server_name quta.com; # 替換為你的域名
? ? location / {
? ? ? ? root /Users/fm/lths/fee-web/dist; # 替換為你的dist目錄的路徑
? ? ? ? index index.html;
? ? ? ? try_files $uri $uri/ /index.html;
? ? }
}
配置完后執(zhí)行sudo nginx -t檢查一下nginx是不是成功配置
然后執(zhí)行sudo nginx -s reload
在我執(zhí)行重啟nginx時(shí)報(bào)錯(cuò)了：
nginx: [error] invalid PID number "" in "/usr/local/var/run/nginx.pid"
我看了一下nginx.pid這個(gè)文件是空的穆碎，正常情況下里面應(yīng)該有進(jìn)程id,Nginx 在嘗試啟動(dòng)時(shí)無(wú)法找到有效的進(jìn)程ID（PID）,所以有這個(gè)報(bào)錯(cuò)牙勘，后來(lái)我執(zhí)行了sudo nginx -c /usr/local/etc/nginx/nginx.conf 重新加載了nginx 配置，這個(gè)命令后再次重啟就成功了
然后在瀏覽器輸入http://quta.com/feeweb/quota就能訪問(wèn)到我們本地項(xiàng)目打包好的頁(yè)面了
（這個(gè)項(xiàng)目在本地直接運(yùn)行npm run dev 時(shí)的訪問(wèn)鏈接是http://本地ip:8088/feeweb/record）
想要知道服務(wù)器上的nginx部署在哪里所禀，可以執(zhí)行whereis nginx
假如項(xiàng)目已經(jīng)部署到服務(wù)器10.9.10.50并且用pm2啟動(dòng)了方面，項(xiàng)目運(yùn)行的端口號(hào)是3002
我們可以在upstream為這個(gè)項(xiàng)目寫一個(gè)別名remote_pro_testin，然后在server中的location中配置proxy_pass http://remote_pro_testin色徘，這樣當(dāng)我們?cè)L問(wèn)server_name中寫的remote.pro.testin.cn時(shí)就會(huì)指向服務(wù)器10.9.10.50的3002對(duì)應(yīng)運(yùn)行的項(xiàng)目
upstream remote_pro_testin {
? ? ? ? server 10.9.10.50:3002 max_fails=3 fail_timeout=20s;
? ? ? ? ip_hash;
}
server {
? ? ? ? listen 80;
? ? ? ? server_name remote.pro.testin.cn remote.saas.testin.cn;
#add_header? Content-Type 'text/html; charset=utf-8';
? ? ? ? location / {
add_header? Content-Type 'text/html; charset=utf-8';
add_header Access-Control-Allow-Origin *;
? ? ? ? ? ? ? ? #limit_conn addr 50;
? ? ? ? ? ? ? ? proxy_pass http://remote_pro_testin;
? ? ? ? ? ? ? ? proxy_redirect off;
? ? ? ? ? ? ? ? proxy_set_header Host $host;
? ? ? ? ? ? ? ? proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
? ? ? ? }
? ? ? ? location ~ ^/(WEB-INF)/ {
? ? ? ? ? ? ? ? deny all;
? ? ? ? }
}
