背景

腳手架版本號：vue cli 3.x
專案路由：vue-router的History模式
原理：url路由處理邏輯從後端轉移到前端。
參考：https://developer.mozilla.org/zh-CN/docs/Web/API/History_API

安裝nginx

參考：https://www.cnblogs.com/jiangwangxiang/p/8481661.html
1.下載nginx

http://nginx.org/en/download.html         下載穩定版本，以nginx/Windows-1.12.2為例，直接下載 nginx-1.12.2.zip

下載後解壓，解壓後如下

2.啟動nginx

有很多種方法啟動nginx

(1)直接雙擊nginx.exe，雙擊後一個黑色的彈窗一閃而過

(2)開啟cmd命令視窗，切換到nginx解壓目錄下，輸入命令 nginx.exe 或者 start nginx ，回車即可

3.檢查nginx是否啟動成功

直接在瀏覽器位址列輸入網址 http://localhost:80，回車，出現以下頁面說明啟動成功

也可以在cmd命令視窗輸入命令 tasklist /fi "imagename eq nginx.exe" ，出現如下結果說明啟動成功

nginx的配置檔案是conf目錄下的nginx.conf，預設配置的nginx監聽的埠為80，如果80埠被佔用可以修改為未被佔用的埠即可

檢查80埠是否被佔用的命令是： netstat -ano | findstr 0.0.0.0:80 或 netstat -ano | findstr "80"

當我們修改了nginx的配置檔案nginx.conf 時，不需要關閉nginx後重新啟動nginx，只需要執行命令 nginx -s reload 即可讓改動生效

4.關閉nginx

如果使用cmd命令視窗啟動nginx，關閉cmd視窗是不能結束nginx程序的，可使用兩種方法關閉nginx

(1)輸入nginx命令  nginx -s stop(快速停止nginx)  或  nginx -s quit(完整有序的停止nginx)

(2)使用taskkill   taskkill /f /t /im nginx.exe

vue專案釋出

使用npm run build命令進行生產環境的打包。把vue專案的dist目錄下的檔案拷貝到nginx目錄下的html目錄。
然後修改nginx的配置檔案是conf目錄下的nginx.conf。

location / {
  try_files $uri $uri/ /index.html;
}

參考：
https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90