最近有時間研究了下前端專案如何在nginx伺服器下進行部署，折騰了兩天總算有所收穫，汗~~
1、打包好的vue專案如何進行部署。
2、如何反向**後端服務介面。
3、vue專案二級訪問目錄在nginx下的配置。
說明：nginx伺服器的安裝及vue專案如何進行打包不在本文的討論範圍，後面的所有實踐說明都是基於個人的本地服務，和專案真實的應用環境稍微有點差別（其實這點差別可以忽略）。
一、如何部署vue專案。
假設我們打包好的專案位址為：d:\demo\dist，然後在nginx安裝目錄下的conf資料夾中找到配置檔案nginx.conf並用文字開啟，在配置檔案的http模組內加入以下配置
server大家可能會看到http模組下已經存在server模組，但這個並不影響，因為server模組可以配置多個；其中listen是自定義的埠號，server_name一般都是nginx伺服器的ip，最關鍵的是在location的root屬性配上打包好的專案位址，index屬性對應的是預設的頁面名稱；配置完成後啟動nginx服務，通過就可以訪問到我們的專案頁面。}
在上述配置完成後我們雖然可以訪問到專案頁面，但通常由於跨域等原因導致後台介面卻無法調通，這時我們可以使用nginx**來解決。具體操作是前端所有請求都使用相對位址，假設都以「/api」開頭，說明一下「/api」並不是介面url中真實存在，只是為了統一**才加上的，然後在上述server模組中新增以下配置
location /api/屬性proxy_pass對應的就是後台服務位址，然後重啟nginx服務後整個專案執行正常。
二、後端服務介面的**配置。
先看下面這段配置
server就可以作為後台服務位址的乙個**位址，中間的那些配置是用來處理跨域問題，這樣就可以使用nginx**位址來解決前文提到的介面調不通的問題。location /
}
nginx反向**的另乙個應用場景就是針對於微服務開發，也就是後台有多個服務位址的情況，我們可以使用nginx把多個位址對映到同乙個ip+埠下，假如後台有三個微服務位址配置如下
server前端專案就可以通過/u1的方式訪問後台請求，需要注意的是proxy_pass的配置位址必須以「/」結尾。location /u2/
location /u3/
}
三、如何配置vue專案的二級訪問目錄
一開始個人的想法是仍然按照前文提到的先部署好vue專案，然後再配置一次**，新增二級目錄**訪問已部署好的專案位址，具體配置如下
server想著通過就可以訪問到我們之前部署好的專案，但事實並非如此，囧~}
其實思路並沒有錯，只是少了點配置（不是nginx的配置，而是vue專案的配置），首先需要給vue專案路由新增「base」字段，
然後在打包時要修改「assetspublicpath」字段值，vue-cli3對應「publicpath」字段，
配置完成後重新打包，就可以通過正常訪問專案了。
Windows下nginx部署vue配置（小白版）
選擇nginx安裝包直接解壓即可 這個很簡單，就不多做演示了 簡單命令 啟動命令 start nginx 停止命令 nginx.exe s stop 也可以在cmd命令視窗輸入命令 tasklist fi imagename eq nginx.exe 出現如下結果說明啟動成功 nginx的配置檔案是...
windows下 Nginx 發布 Vue專案
安裝環境 在指定目錄解壓即可使用。打包vue專案 npm run build 打包檔案在dist目錄下部署專案 將dist目錄下打包檔案遷移至nginx html目錄下修改配置 根據實際情況修改nginx conf目錄下 nginx.conf配置檔案 例如 listen 監聽埠 server nam...
windows下用nginx發布vue專案
2020 11 3 一.工作計畫 安裝配置 nginx 並執行vue專案 解決思路 1 安裝nginx 2 打包發布包 npm run build 3 配置nginx server location router 後台介面 location api error page 500 502 503 50...