vue路由history模式刷新頁面出現404問題

vue hash模式下，URL中存在'#'，用'history'模式就能解決這個問題。但是history模式會出現刷新頁面後，頁面出現404。解決的辦法是用nginx配置一下。

在nginx的配置文件中修改

方法一：

location /{
 root /data/nginx/html;
 index index.html index.htm;
 if (!-e $request_filename) {
 rewrite ^/(.*) /index.html last;
 break;
 }
}

方法二：

 server {
 listen 8081;#默認端口是80，如果端口沒被佔用可以不用修改
 server_name myapp.com;
 root D:/vue/my_app/dist;#vue項目的打包後的dist
 location / {
 try_files $uri $uri/ @router;#需要指向下面的@router否則會出現vue的路由在nginx中刷新出現404
 index index.html index.htm;
 }
 #對應上面的@router，主要原因是路由的路徑資源並不是一個真實的路徑，所以無法找到具體的文件
 #因此需要rewrite到index.html中，然後交給路由在處理請求資源
 location @router {
 rewrite ^.*$ /index.html last;
 }
 #.......其他部分省略
 }

這些技術如何學習，有沒有免費資料？

對前端的技術，架構技術感興趣的同學關注我的頭條號，並在後臺私信發送關鍵字：“前端”即可獲取免費的架構師學習資料

知識體系已整理好，歡迎免費領取。還有面試視頻分享可以免費獲取。關注我，可以獲得沒有的架構經驗哦！

閱讀更多 前端攻城小牛 的文章

關鍵字: 路由器 Nginx 模式