vue hash改為history無法刷新或者404問題

需要運維同事的配合。。

一、問題描述及原因
1、問題描述
當我們將項目成功部署線上之后，按照路徑正常訪問項目時正常，在項目中使用目錄跳轉也正常，但是一旦刷新網頁就會nginx404。並且直接使用二級路由的路徑訪問項目也是404

2、問題原因
首先官網對此有所解答，官網地址：vue-router Html5 History模式
大致來說就是vue-router模式使用hash模式：使用 URL 的 hash 來模擬一個完整的 URL，於是當 URL 改變時，頁面不會重新加載。所以適配性更好，刷新頁面時也不會有問題存在。但是他的缺點就是會添加#號，看起來就很不正常。

所以我們會選擇更加優美的history模式：充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面。

但是頁面刷新時，nginx就會根據你的路由尋找頁面。

舉個例子：
我的項目是部署在nginx的html文件夾的assembly目錄下

 

 

那我訪問時就是：
http://128.129.103.157/assembly

如果我進入二級目錄時，當前路徑就是：
http://128.129.103.157/assembly/about

這時我刷新瀏覽器的頁面，nginx就會按照路徑去找對應的頁面，他就會去assembly文件夾下面的about文件夾下面去找index.html，但是我們的vue是單頁面應用，根本就沒有about文件夾，所以自然就找不到，也就會nginx 404。

二、解決方法
我們按照官方說法，修改nginx的配置，在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。

意思就是：只要你瀏覽器訪問的是我項目下的路徑，就給我跳轉到我項目中的那唯一一個index.html，這樣就不會出現404，而且路由還會被vue-router所捕獲到，仍舊在當前頁面刷新，並不會被重定向到首頁

1.項目部署在根目錄時
也就是你的nginx的html目錄里面就是你的vue項目
配置方式按照官網所說
在nginx.conf里面的server下面的

location / {
    root   html;
    index  index.html index.htm;
}

中增加一句
try_files $uri $uri/ /index.html;

最后應該是

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

代表凡是匹配到 / 都會被跳轉到 / 下的index.html

2.項目部署在自定義目錄
一般我們都不會吧項目部署在根目錄，因為我們部署的項目一般不止一個，而且部署在根目錄不太易於管理
這樣我們就要稍微修改一下配置
在
location / {undefined
}

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

 

 

你就將 ‘assembly/’ 替換成你的 ‘文件夾名稱/’ 即可
如果是多級目錄，就依次在后面拼接

配置修改完成之后記得重啟nginx
/usr/local/nginx/sbin/nginx -s reload

————————————————
版權聲明：本文為CSDN博主「程序員的脫發之路」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_43845090/article/details/108923073