最近學(xué)習(xí)vue和nuxt,于是部署Vue和Nuxt項(xiàng)目到騰訊云上，因?yàn)轫?xiàng)目涉及一些跨域請(qǐng)求父晶，所以采用了Nginx代理請(qǐng)求本地的node服務(wù)（利用pm2做進(jìn)程管理）。node服務(wù)借助axios設(shè)置headers的referer弄跌、host轉(zhuǎn)發(fā)請(qǐng)求甲喝，解決跨域請(qǐng)求問題。
一铛只、部署過步驟
1.首先購買服務(wù)器埠胖，域名等。獲得公共ip地址淳玩，下載遠(yuǎn)程桌面鏈接軟件直撤；
2.服務(wù)器新建root文件夾。拉去GitHub項(xiàng)目代碼至root目錄下蜕着，npm install安裝依賴的包谋竖；
3.項(xiàng)目構(gòu)建红柱，無錯(cuò)誤后，下載nginx,并修改nginx-conf的代理配置蓖乘；
4.用nod給項(xiàng)目起一個(gè)服務(wù)锤悄，并使用pm2對(duì)node的進(jìn)程進(jìn)行管理和保護(hù)；
5.本地瀏覽器輸入域名和相應(yīng)的端口號(hào)嘉抒，頁面正常顯示零聚，部署完成。
3,4,5接下來會(huì)詳細(xì)講到
二些侍、vue項(xiàng)目的部署
1.vue項(xiàng)目構(gòu)建
（1）首先需要安裝express起動(dòng)服務(wù)
$ npm install express --save
(2)因?yàn)閜m2是基于服務(wù)來管理的隶症，所以我們需要一個(gè)在webpack構(gòu)建好的靜態(tài)文件夾上（一般是dist/）搭建一個(gè)node服務(wù)，這里我們用express來搭建node服務(wù)岗宣。在項(xiàng)目的跟目錄創(chuàng)建app.js
// app.js
const fs = require('fs');
const path = require('path');
const express = require('express');
const chalk = require('chalk')
const app = express();
app.use(express.static(path.resolve(__dirname, './dist')))
app.get('/', function(req, res) {
const html = fs.readFileSync(path.resolve(__dirname, './dist/home.html'), 'utf-8')
res.send(html)
})
app.get('/home', function(req, res) {
const html = fs.readFileSync(path.resolve(__dirname, './dist/home.html'), 'utf-8')
res.send(html)
})
app.get('/about', function(req, res) {
const html = fs.readFileSync(path.resolve(__dirname, './dist/about.html'), 'utf-8')
res.send(html)
})
app.listen(8082, res => {
console.log(chalk.yellow('Start Service On 8082'));
});
（3）修改vue.config.ts 的publicPath和port
修改端口蚂会，跟代理端口一致,修改publicPath為空
port: 8082
publicPath: ''
(4) 打包項(xiàng)目
npm run build
這樣在根目錄終端下運(yùn)行使用pm2運(yùn)行node app.js就可以搭建一個(gè)以dist為根路徑的node服務(wù)了（這里要確保安裝了代碼中的依賴插件）。
（5）在服務(wù)器全局安裝pm2
// 安裝pm2
npm i pm2 -g
（6）pm2在項(xiàng)目根目錄下運(yùn)行
pm2 start node_modules/nuxt/bin/nuxt-start --name ts-vue-test
這樣node服務(wù)就可以用pm2進(jìn)行操作了狈定，查看pm2管理的項(xiàng)目颂龙。
可以運(yùn)行pm2 list查看當(dāng)前管理的項(xiàng)目
常用的pm2命令總結(jié)
pm2 show 0 # 查看進(jìn)程詳情
pm2 list #查看當(dāng)前的進(jìn)程列表
pm2 stop all #停止PM2列表中所有的進(jìn)程
pm2 stop 0 #停止PM2列表中進(jìn)程為0的進(jìn)程
pm2 reload all #重載PM2列表中所有的進(jìn)程
pm2 reload 0 #重載PM2列表中進(jìn)程為0的進(jìn)程
pm2 delete 0 #刪除PM2列表中進(jìn)程為0的進(jìn)程
pm2 delete all #刪除PM2列表中所有的進(jìn)程
2、Nginx的配置
項(xiàng)目進(jìn)行到現(xiàn)在纽什，在服務(wù)器上的項(xiàng)目正常沒有問題，但是當(dāng)我們?cè)跒g覽器中輸入http://zhoupengfei1996.com:8082/躲叼，額芦缰，震驚，你并沒有看到自己想要的結(jié)果枫慷，(让蕾；′⌒`)
這時(shí)候就改Nginx出場(chǎng)時(shí)候啦，當(dāng)當(dāng)當(dāng)當(dāng)~~~
(1)或听、Nginx安裝
（1）第一步探孝、Nginx 的安裝步驟比較簡(jiǎn)單，安裝在windows上推薦使用壓縮包的安裝方式誉裆，下載地址;
（2） 第二步顿颅、有穩(wěn)定版本和最新版本及以前版本，推薦使用穩(wěn)定版本開發(fā)
（3） 第三步足丢、下載完成之后粱腻，進(jìn)行解壓可以看到如下 文件結(jié)構(gòu)
（4）第四步、雙擊nginx,exe 就啟動(dòng)了斩跌。在頁面輸入localhost绍些。出現(xiàn)如下界面則表示安裝成功。默認(rèn)監(jiān)聽80端口號(hào)
（5）第五步耀鸦、nginx的配置柬批，打開下載的nginx文件夾，選擇conf/nginx.conf，修改配置如下：
#user nginx;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
gzip on;
server {
listen 80;
server_name www.zhoupengfei1996.com:8082;
location / {
proxy_pass http://127.0.0.1:8082/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
（6）第六步氮帐、nginx根目錄下打開命令窗口嗅虏，nginx -s reload 重新載入nginx(當(dāng)配置信息發(fā)生修改時(shí))，重新在瀏覽器中打開www.zhoupengfei1996.com. 頁面正常請(qǐng)求到揪漩。如下圖：
nginx其他命令
start nginx # windows下的啟動(dòng)命令
nginx -s quit # 停止ngix
nginx -s reload # 重新載入nginx(當(dāng)配置信息發(fā)生修改時(shí))
nginx -h # 查看幫助信息
至此旋恼，vue項(xiàng)目部署完畢。
參考文章：
Vue項(xiàng)目部署（阿里云+Nginx代理+PM2）
nginx+pm2+vue+webpack發(fā)布項(xiàng)目
三奄容、nuxt項(xiàng)目的部署
1.為什么要用Nuxt.js
原因其實(shí)不用多說冰更，就是利用Nuxt.js的服務(wù)端渲染能力來解決Vue項(xiàng)目的SEO問題。
二昂勒、Nuxt.js和純Vue項(xiàng)目的簡(jiǎn)單對(duì)比
build后目標(biāo)產(chǎn)物不同
vue: dist
nuxt: .nuxt網(wǎng)頁渲染流程
vue: 客戶端渲染蜀细，先下載js后，通過ajax來渲染頁面戈盈；
nuxt： 服務(wù)端渲染奠衔，可以做到服務(wù)端拼接好html后直接返回，首屏可以做到無需發(fā)起ajax請(qǐng)求塘娶；部署流程
vue： 只需部署dist目錄到服務(wù)器归斤，沒有服務(wù)端，需要用nginx等做Web服務(wù)器刁岸；
nuxt： 需要部署幾乎所有文件到服務(wù)器（除node_modules脏里，.git），自帶服務(wù)端虹曙，需要pm2管理（部署時(shí)需要reload pm2）迫横，若要求用域名，則需要nginx做代理酝碳。項(xiàng)目入口
vue: /src/main.js矾踱，在main.js可以做一些全局注冊(cè)的初始化工作；
nuxt: 沒有main.js入口文件疏哗，項(xiàng)目初始化的操作需要通過nuxt.config.js進(jìn)行配置指定呛讲。
1.nuxt項(xiàng)目構(gòu)建
1.在本地開發(fā)的項(xiàng)目中配置及打包
npm run build
2.打包后，將以下文件上傳至服務(wù)器,接下來的操作都在服務(wù)器上進(jìn)行操作
.nuxt
static
nuxt.config.js
package.json
我使用的是直接把整個(gè)項(xiàng)目上傳到git上沃斤，服務(wù)器這邊拉取代碼
3.進(jìn)入到項(xiàng)目的根目錄下圣蝎，依次執(zhí)行
npm install
npm run dev
npm run build
npm run start
4.進(jìn)入項(xiàng)目根目錄下，pm2啟動(dòng)nuxt項(xiàng)目服務(wù)
pm2 start npm --name "my-nuxt-app" -- run start
nuxt被啟動(dòng)衡瓶，如下圖：
5.Nginx配置代理服務(wù)
nginx可以開啟多個(gè)代理徘公，在代理vue項(xiàng)目的nginx配置文件中，新增一個(gè)服務(wù)哮针，如下：
# 新建一個(gè)nuxtserver服務(wù)
upstream nuxtserver{
server 127.0.0.1:3000;
keepalive 64;
}
server {
listen 8080;
server_name www.zhoupengfei1996.com; #這里對(duì)應(yīng)你服務(wù)器的域名
location / {
proxy_pass http://nuxtserver; #這里對(duì)應(yīng)上面upstream中新建的服務(wù)名
index index.html index.htm;
}
location /home {
proxy_pass http://nuxtserver;
index home.html home.htm;
}
}
重新載入nginx即可
nginx -s reload # 重新載入nginx(當(dāng)配置信息發(fā)生修改時(shí))
至此关面，nuxt部署完畢坦袍，本地瀏覽器輸入www.zhoupengfei1996.com:8080即可查看頁面：
參考：
Nuxt服務(wù)端部署
