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

sanyang 發布于2019-07-25 14:28 / 2067人閱讀

摘要：模式下，中存在，用模式就能解決這個問題。但是模式會出現刷新頁面后，頁面出現。解決的辦法是用配置一下。

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;
    }
}

方法二：
vue.js官方教程里提到的https://router.vuejs.org/zh/g...

  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;
        }
        #.......其他部分省略
  }

GPU云服務器云服務器訪問出現404問題服務器請求出現404 cdn刷新緩存報404 設置404頁面

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/40137.html

配置nginx解決vue路由history模式下刷新404問題

摘要：在路由模式為的時候，刷新頁面會出現問題。我們只需要在服務器配置如果匹配不到任何靜態資源，就跳轉到默認的。表示你監聽的端口號打包后的文件夾目錄在vue路由模式為history的時候，刷新頁面會出現404問題。我們只需要在服務器配置如果URL匹配不到任何靜態資源，就跳轉到默認的index.html。 server { listen 8105; // 表示你nginx監聽...

stormzhang 2019-07-25 14:27 評論0 收藏0
Vue應用部署到服務器的正確方式

Vue應用部署到服務器的正確方式很多時候我們發現辛辛苦苦寫的VueJs應用經過打包后在自己本地搭建的服務器上測試沒有什么問題，但真正放在服務器上后，會發現或多或少的問題，比如：頁面出現空白現象，獲取資源路徑不對等，我相信以VueJs為技術棧來進行前端開發的小伙伴或多或少都會遇到這樣的問題，我也遇到過，那現在我們就來一一解決這樣的問題。如何打包基于Vue-Cli,通過npm run build...

xcc3641 2019-08-20 18:00 評論0 收藏0
vue項目路由在history模式下布置在Tomcat下解決刷新404問題

摘要：首先打包之前需要修改文件夾下的其次記得要添加路由頁面在的下的前端文件夾下新建文件夾，并在該文件夾下建立文件，具體內容如下 1、首先打包之前需要修改config文件夾下的index.js showImg(https://segmentfault.com/img/bVbnqP7?w=872&h=303); 2、其次記得要添加404路由頁面 showImg(https://segmentfa...

luckyyulin 2019-08-23 14:48 評論0 收藏0