怎麼配置vue的hash模式

Ⅰ Vue-router 中hash模式和history模式的區別

在Vue路由領域，hash模式與history模式的區別是面試常見問題，體現了開發經驗的可靠性。小白的回答僅僅是形式上的解釋，即hash模式URL帶#號，而history模式不帶#號。然而，大牛的回答則深入了形式與功能的層面。

在形式上，hash模式的URL始終帶有#號，這是其默認使用的模式。歷史模式的優勢在於提供了一個標準的URL，適合在需要URL規范的場景下使用，如分享頁面到第三方應用中。然而，歷史模式在處理分享鏈接至不支持#號的第三方應用時，需要使用歷史記錄棧的pushState()和replaceState()方法進行URL跳轉，以避免刷新導致的404錯誤。為解決這一問題，需要與後端合作，配置Apache或nginx等伺服器進行URL重定向。

實現前端路由的目的在於改變視圖的同時，無需向後端發出請求。瀏覽器提供了兩種支持：hash模式與history模式。hash模式通過在URL中使用#符號，改變URL後不會向後端發送請求，因此不會重新載入頁面。而history模式利用HTML5的pushState()和replaceState()方法，可以實現URL跳轉而不刷新頁面，但這一模式需要特定瀏覽器支持，並且與後端的配合更為關鍵。

在Vue中，路由有hash模式（默認）和history模式兩種選擇。hash模式利用#符號改變URL，而不會影響HTTP請求，適合於URL規范要求較高的場景。history模式則利用瀏覽器歷史記錄棧，通過pushState()和replaceState()方法實現URL跳轉，避免了頁面刷新帶來的404錯誤，但需要與伺服器端進行配置，確保伺服器能夠處理這些自定義URL。

Vue中的history模式需要配置mode: 'history'，以充分利用HTML5的pushState()和replaceState()方法。hash模式則利用window.onhashchange事件監聽URL中哈希值的變化，實現頁面載入。歷史模式的實現依賴於pushState()和replaceState()方法，這些方法只能改變當前地址欄的URL，而不向後端發送請求，也不會觸發popstate事件的執行。

在實際應用中，選擇hash模式或history模式取決於項目需求。一般情況下，兩者均可使用，如果更重視美觀性，則可選擇history模式，以去除URL中的#符號。hash模式的另一個優勢在於，通過state參數可以傳遞任意類型的數據，而history模式在URL和狀態傳遞方面則更為有限。

總的來說，hash模式與history模式都是利用瀏覽器自身的特性來實現前端路由，Vue-Router正是利用了這些特性來提供路由功能。選擇合適的模式取決於項目的具體需求，如URL規范性、與第三方應用的集成以及對伺服器端的依賴。

Ⅱ vue項目如何部署到伺服器

第一步配置 vue.config.js

第二步修改路由，改為 hash模式

第三步文件打包,執行以下，目錄中會出現一個dist文件夾，將文件拖到伺服器的 root 文件夾中

第四步可以通過域名進行訪問 http://www.linlin.run/my-project/index.html#/home