<del id="uugkw"></del>

<strike id="uugkw"></strike>

<del id="uugkw"></del>

VUE路由history模式坑記--NGINX

voidking 發布于2019-07-25 13:59 / 1611人閱讀

摘要：還有可能會有一些隱藏的問題沒被發現。如果能像其他系統的路徑一樣，就不存在這些問題了。對于的模式在開發的時候，一般都不出問題。是因為開發時用的服務器為，環境中自然已配置好了。希望大家使用的方式進行處理，的方式會被第三方劫持

因微信分享和自動登錄需要，
對于URL中存在"#"的地址，處理起來比較坑（需要手動寫一些代碼來處理）。還有可能會有一些隱藏的問題沒被發現。

如果VUE能像其他（JSP/PHP）系統的路徑一樣，就不存在這些問題了。

對于VUE的router[mode: history]模式在開發的時候，一般都不出問題。是因為開發時用的服務器為node，Dev環境中自然已配置好了。

但對于放到nginx下運行的時候，自然還會有其他注意的地方。總結如下：

在nginx里配置了以下配置后，可能首頁沒有問題，鏈接也沒有問題，但在點擊刷新后，頁面就無法顯示了（404）

    location /{

        root   /data/nginx/html;
        index  index.html index.htm;
    }

為了解決404，需要通過以下兩種方式:
方式一

    location /{

        root   /data/nginx/html;
        index  index.html index.htm;

        error_page 404 /index.html;
    }

方式二

    location /{

        root   /data/nginx/html;
        index  index.html index.htm;

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

這樣問題好像就可以解決了。

此外，如果VUE應用沒有發布在域名的目錄根下，比如[http://xxx.com/wx/]
那么除了上述配置：

    location /wx{

        root   /data/nginx/html;
        index  index.html index.htm;

        #error_page 404 /wx/index.html;
        if (!-e $request_filename) {
            rewrite ^/(.*) /wx/index.html last;
            break;
        }
    }

還應該在VUE項目里把每個路徑加上[/wx]這一段(或者指定base: "/wx/")，要不頁面會顯示為空白：

以上幾種方案基本上已經能把坑填上了，如果還有其他問題，比如瀏覽器版本低不支持什么的，不要來問了。

希望大家使用rewrite 的方式進行處理，404的方式會被第三方劫持！！！

云服務器 GPU云服務器阿里云服務器路由模式 history 遇坑記脫坑記

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

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

實現一個前端路由，如何實現瀏覽器的前進與后退？

摘要：執行過程如下實現瀏覽器的前進后退第二個方法就是用兩個棧實現瀏覽器的前進后退功能。我們使用兩個棧，和，我們把首次瀏覽的頁面依次壓入棧，當點擊后退按鈕時，再依次從棧中出棧，并將出棧的數據依次放入棧。 showImg(https://segmentfault.com/img/bVbtK6U?w=1280&h=910); 如果要你實現一個前端路由，應該如何實現瀏覽器的前進與后退？ 2. 問題...

劉東 2019-08-23 18:01 評論0 收藏0
Vue Router history模式的配置方法及其原理

摘要：但如果要使用模式，我們需要在后端進行額外配置。模式的配置方法我們來看看官方文檔是教我們怎么配置的模式。模式的配置實踐及原理強烈建議閱讀這部分之前，先看一下的這部分文檔和這部分文檔。只配置前端的情況首先，我們將設置為，但不配置后端。始發于我的博客 ryougifujino.com，歡迎訪問留言。 vue-router分為hash和history模式，前者為其默認模式，url的表現形式為...

Richard_Gao 2019-08-30 11:04 評論0 收藏0
vue路由history模式刷新頁面出現404問題

摘要：模式下，中存在，用模式就能解決這個問題。但是模式會出現刷新頁面后，頁面出現。解決的辦法是用配置一下。 vue hash模式下，URL中存在#，用history模式就能解決這個問題。但是history模式會出現刷新頁面后，頁面出現404。解決的辦法是用nginx配置一下。在nginx的配置文件中修改方法一： location /{ root /data/nginx/html...

sanyang 2019-07-25 14:28 評論0 收藏0
Vue項目部署遇到的問題及解決方案

摘要：模式部署沒有什么問題，只要訪問到服務器上的，就可以訪問網站了。問題起因在做年度賬單項目的時候，項目部署的時候，用的是模式。這樣幾項配置后，就可以在子目錄下訪問網站，刷新也沒有問題。寫在前面 Vue-Router 有兩種模式，默認是 hash 模式，另外一種是 history 模式。 hash：也就是地址欄里的 # 符號。比如 http://www.example/#/hello，...

姘擱『 2019-08-23 14:38 評論0 收藏0