上午已經(jīng)把Nginx安裝好,現(xiàn)在就進(jìn)行部署。
打包項(xiàng)目
npm run build

image.png
然后會在項(xiàng)目根目錄中生成
dist文件夾
Nginx配置
打開Nginx的配置文件 E:\nginx-1.15.12\conf\nginx.conf

image.png
然后啟動Nginx,訪問http://localhost,項(xiàng)目正常運(yùn)行起來了。

image.png
遇到的問題
項(xiàng)目看似已經(jīng)正常運(yùn)行了,能正常跳轉(zhuǎn),但是在我刷新頁面的時(shí)候出錯(cuò)了。

image.png
解決方式一:
把vue-router的mode修改為hash,如果不配置默認(rèn)就是hash,我是修改過所以要改回來。
mode: "hash",

image.png
··
然后重新打包就可以了,但是這種模式會在
Url上面出現(xiàn)非常丑的#,如果不介意就這樣就可以了,我是受不了。
解決方式二:
mode: "history",
我就非要把 #號搞掉,那么可以在Nginx里面配置一句話.
try_files $uri $uri/ /index.html;

image.png
至于這句話是啥意思可以百度查查,我就簡單的理解為
rewrite
解決方式三 - 網(wǎng)上看到的沒有測試過,只是做個(gè)記錄
匹配errpr_page
location /{
root /data/nginx/html;
index index.html index.htm;
error_page 404 /index.html;
}
暫時(shí)我就只遇到這點(diǎn)問題,遇到其他問題在記錄。