`vue-router`的`History`模式下的項目發佈

背景

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

安裝nginx

參考：http://www.javashuo.com/article/p-ppgmyheu-hg.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