今天在使用nginx部署Vue項(xiàng)目時冶伞，遇到了一些坑狐史，記錄下來希望能幫助到別人罢低。
我是在windows服務(wù)器上使用的nginx，windows中最初使用的幾條命令在官網(wǎng)上都有媳禁，如:
nginx -s stop
nginx -s quit
nginx -s reload
nginx -s reopen
關(guān)于在windows中使用nginx的文檔：http://nginx.org/en/docs/windows.html眠副，寫的比較詳細(xì)，可以先看一下竣稽。
下載
從官網(wǎng)下載即可（http://nginx.org/en/download.html）選擇windows穩(wěn)定 版本
![D51SA}P]`D820F1@@I0}~71.png](https://upload-images.jianshu.io/upload_images/11835085-e3a2befef77dd350.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
下載后解壓放到服務(wù)器上囱怕，一定不要直接打開nginx.exe，也不要使用記事本編輯config文檔毫别。
直接打開nginx.exe關(guān)閉會比較麻煩娃弓，用記事本打開會改變配置文件的格式，從網(wǎng)上資料查到的岛宦，有些道理台丛。
部署
使用cmd命令進(jìn)入文件夾，這時候沒有開啟nginx服務(wù)砾肺，可以運(yùn)行命令
tasklist /fi "imagename eq nginx.exe"
輸出結(jié)果：
信息: 沒有運(yùn)行的任務(wù)匹配指定標(biāo)準(zhǔn)挽霉。
接下來啟動nginx，運(yùn)行start nginx
再運(yùn)行命令 tasklist /fi "imagename eq nginx.exe"
輸出結(jié)果應(yīng)該類似于這樣：
映像名稱 PID 會話名 會話# 內(nèi)存使用
========================= ======== ================ =========== ============
nginx.exe 27388 RDP-Tcp#0 2 5,664 K
nginx.exe 31660 RDP-Tcp#0 2 5,964 K
這就是啟動nginx成功了变汪，如果不是這樣的話去log文件夾下去看error.log文件查看具體原因侠坎，可能是端口被占用等問題，也容易解決裙盾。
端口被占用的話可以去conf / nginx.conf修改下端口號实胸，默認(rèn)的端口號是80他嫡，可以修改為其他的。
80端口是http的默認(rèn)端口庐完，比如部署的服務(wù)器是123.45.67.89涮瞻，nginx部署成功后訪問http://123.45.67.89就會跳轉(zhuǎn)到指定的網(wǎng)頁，80可以忽略掉假褪。而使用其他端口的話就需要加上端口號才能訪問署咽，如果使用8080端口就要輸入http://123.45.67.89:8080才行。這是我剛剛理解的生音。
Vue項(xiàng)目部署
vue執(zhí)行npm run build后會將整個項(xiàng)目打包成dist文件夾宁否。
可以將dist文件夾直接復(fù)制到nginx文件目錄下的html文件夾中，同時修改nginx配置文件指向的文件路徑缀遍。
server {
listen 8088;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
# 修改這里的路徑
root C:/Users/Administrator/Desktop/nginx-1.18.0/html/dist;
index index.html index.htm;
autoindex on; #開啟nginx目錄瀏覽功能
autoindex_exact_size off; #文件大小從KB開始顯示
charset urf-8;
add_header 'Access-Control-Allow-Origin' '*'; #允許來自所有的訪問地址
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持請求方式
add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
}
...
}
我這里端口用的8088慕匠，配置文件修改后必須重啟nginx，執(zhí)行nginx -s reload命令重啟域醇，接下來訪問對應(yīng)的網(wǎng)址台谊，如http://123.45.67.89:8088即可訪問到vue網(wǎng)頁。
網(wǎng)上文章的質(zhì)量太差了譬挚，一個小小的問題解決方法都是繞來繞去的锅铅，所以還是看官方文檔比較好。
注意事項(xiàng)
- 不要雙擊打開nginx.exe减宣，使用命令行操控
- 最好不要使用記事本打開配置文件盐须，notepad++應(yīng)該可以
- 配置文件修改后需要重啟nginx才能生效
- 端口被占用，可以更換nginx的端口漆腌，這樣比較簡單
- 通過error.log查看錯誤贼邓，解決問題
參考自：
Nginx Windows詳細(xì)安裝部署教程(https://www.cnblogs.com/taiyonghai/p/9402734.html)
nginx for Windows(http://nginx.org/en/docs/windows.html)
