Vue cli3 0打包部署到Nginx

vue-cli3.0相比於vue-cli2.0，僅從根目錄來看，最大的區別就是vue-cli3.0少了build和config資料夾，前者用於專案構建(webpack)相關**，後者用於專案開發環境配置。取而代之的是vue.config.js這個檔案，看起來目錄簡潔不少。

圖1 vue-cli3.0根目錄

開啟vue.config.js檔案，大致的配置如下：

module.exports =
},'/pf': 
},'/pc': }}
},}

這裡我配置了三個後台服務（oauth、pc、pf）的****路徑，打包的時候需要注意，vue-cli3.0（vue-cli3.3+以上）已經用publicpath取代了baseurl，如果繼續使用baseurl，會報警告，如圖2所示，打好的包也不能用，靜態檔案全部失效，如圖3所示。

圖2 如果使用baseurl打包檔案，控制台會報警告，讓你用publicpath替代baseurl

圖3 使用baseurl打包檔案，載入的頁面靜態檔案全部失效

這是因為webpack會在靜態檔案路徑前面新增publicpath的值，即專案中的靜態資源，它們的路徑對應的是專案根目錄下的位置，但是我們打包的檔案裡找不到這個路徑，所以載入不了對應的靜態資源。所以我們需要設定publicpath，將其引到打包生成檔案dist下的相對路徑，打包之後載入不了靜態資源很多情況下都是因為publicpath沒設定好。

vue.config.js設定好之後，npm run build，打包成功大致如圖4所示。

圖4 打包成功　

然後這個時候專案根目錄下就會生成乙個dist檔案，可以先點開這個dist檔案下的index.html檔案，看它在瀏覽器上是否能正常顯示。如果能，則包是正確的；反之，如果靜態資源（特別是）沒有載入出來，如圖3所示，控制台裡祖國山河一片紅，就要回去好好找找原因了。

#開始配置我們的反向**

location /oauth

#反向**2

location /pc

#反向**3

需要注意的是listen配置的是nginx監聽埠，root放的是打包檔案dist的所在路徑，如果是乙個nginx布置了兩個前端專案的話，得用alias，如下所示：

location /productcenter

location /profilecenter

還有就是配置****的proxy_pass，可與上文vue.config.js裡的**配置比較也很清楚，就不詳述了，其他的設定（瀏覽器協商快取等）也就不在此處展開了。

然後，啟動nginx，雙擊nginx.exe，命令列一閃而過，開啟瀏覽器，輸入http://localhost:81，即可看到你布置在nginx上的頁面了。

windows下常用nginx命令列（cd進入nginx所在路徑後使用）：

start nginx //啟動nginx

nginx -s reload //過載配置

nginx -s stop //快速停止

nginx -s quit //完整有序停止

linux下常用nginx命令列（cd進入nginx所在路徑後使用）：

./nginx //啟動nginx

./nginx -s reload //過載配置

./nginx -s stop //快速停止

./nginx -s quit //完整有序停止

2020/05/11更新：

如果公司有配置f5+gateway的情況下，此篇nginx配置****就不是很合適了，雖然也能用，但是浪費效率和效能，如果願意折騰的，原因和具體做法請參考此文：

Vue cli3 0打包部署到Nginx

vue cli3 0 打包並在本地檢視

vue cli 3 0 分多環境打包配置

ng8打包系列問題

Vue cli3 0打包部署到Nginx

vue cli3 0 打包並在本地檢視

vue cli 3 0 分多環境打包配置

ng8打包系列問題

相關推薦