vue 專案地址去掉 #
vue-router 設定 history 模式
vue 專案往往會搭配 vue-router 官方路由管理器，它和 vue.js 的核心深度整合，讓構建單頁面應用變得易如反掌。vue-router 預設為 hash 模式，使用 URL 的 hash 來模擬一個完整的 URL，所以當 URL 改變時，頁面不會重新載入，只是根據 hash 來更換顯示對應的元件，這就是所謂的單頁面應用。
但是使用預設的 hash 模式時，瀏覽器 URL 地址中會有一個 # ，這跟以往的網站地址不太一樣，可能也會讓大部分人不習慣，甚至覺得它很醜。
想要去掉地址中的 # 也不難，只要更換 vue-router 的另一個模式 history 模式即可做到。
history 模式
當你使用 history 模式時，URL 就變回正常又好看的地址了，和大部分網站地址一樣，例如： http://zhengchang.com/name/id
不過，這種模式有個坑，不僅需要前端開發人員將模式改為 history 模式，還需要後端進行相應的配置。如果後端沒有正確的配置好，當你訪問你的專案地址時，就會出現 404 ，這樣可就更不好看了。
官方給出了幾種常用的後端配置例子：
- Apache
- nginx
- 原生 Node.js
因為我的專案後端服務是 IIS ，所以就著重分享一下 IIS 的相關配置 。
IIS 後端配置
首先，前端將 vue-router 模式修改為 history 模式，開發完成並打包後，將檔案部署到站點。站點的根目錄會有一些相關配置檔案，這些後端人員會很清楚，前端開發只需要告訴後端人員如何寫去掉 # 的配置檔案。
在站點的根目錄建立一個 web.config 檔案，內容如上圖所示。起到關鍵作用的是 rewrite 標籤中的程式碼：
-
rule 標籤：代表定義的一條規則。
-
match 標籤：你的規則是什麼要求，url 屬性內容就是要求（正則表示式）。
-
action 標籤：type 屬性為 Rewrite（重寫），url 屬性為目標。意思是：如果滿足 match 標籤中 url 屬性的正則，就執行此配置（將符合match標籤url要求的地址，重寫為action標籤中url屬性的地址）。
這個配置就和重定向一樣，將符合你要求的地址，重定向為你想要的地址。下面是我的專案中 IIS 的配置：
我的要求是，除了 "api" 或者 "token" 開頭的地址，全部重定向為 " / " ，因為我的介面地址是 api 和 token 開頭的，所以介面地址不能變。
api 介面
token 介面
然後服務端設定的是預設顯示目錄下的 index.html ，而這個 index.html 檔案就是前端打包後生成的 html 檔案。網站打開了 html 檔案，執行對應指令碼，就會按照你的路由設定顯示對應的元件內容，瀏覽器地址中的 # 也被替換掉了。
還有一個 rule 標籤是配置我的圖片路徑的。
圖片在開發環境中，都按照對應的元件，分類放到不同的資料夾中，例如：home 元件中的 banner 圖，路徑是 “ assets/home/banner.png ”。
我的專案打包後，生成了 index.html 和 static 資料夾，js、css、img等資料夾都在 static 中。所有的圖片全都放在“ /static/img/ ”下面，圖片路徑也會自動更改為“ ./static/img/ ”。
我不希望圖片路徑重定向為“ / ”，所以規則就是：將符合“ ./static/img/name.png ”重定向為“ /static/img/name.png ”。
靜態圖片路徑
配置裡的最難的可能是那個正則表示式，根據不同的需求配置不同的正則表示式，搞定正則就大功告成了！
如果覺得有幫助，就分享給你覺得需要的朋友吧！
公眾號【前端很忙】