vue位址去掉

2021-08-29 09:47:39 字數 1033 閱讀 4400

但是使用預設的 hash 模式時,瀏覽器 url 位址中會有乙個#,這跟以往的**位址不太一樣,可能也會讓大部分人不習慣,甚至覺得它很醜。

想要去掉位址中的 # 也不難,只要更換 vue-router 的另乙個模式history模式即可做到。

不過,這種模式有個坑,不僅需要前端開發人員將模式改為 history 模式,還需要後端進行相應的配置。如果後端沒有正確的配置好,當你訪問你的專案位址時,就會出現 404 ,這樣可就更不好看了。

官方給出了幾種常用的後端配置例子:

因為我的專案後端服務是 iis ,所以就著重分享一下iis 的相關配置

iis 後端配置

首先,前端將 vue-router 模式修改為 history 模式,開發完成並打包後,將檔案部署到站點。站點的根目錄會有一些相關配置檔案,這些後端人員會很清楚,前端開發只需要告訴後端人員如何寫去掉 # 的配置檔案。

在站點的根目錄建立乙個 web.config 檔案,內容如上圖所示。起到關鍵作用的是rewrite標籤中的**:

我的要求是,除了 「api」 或者 「token」 開頭的位址,全部重定向為 " / " ,因為我的介面位址是 api 和 token 開頭的,所以介面位址不能變。

然後服務端設定的是預設顯示目錄下的 index.html ,而這個 index.html 檔案就是前端打包後生成的 html 檔案。**開啟了 html 檔案,執行對應指令碼,就會按照你的路由設定顯示對應的元件內容,瀏覽器位址中的 # 也被替換掉了。

還有乙個 rule 標籤是配置我的路徑的。

我的專案打包後,生成了 index.html 和 static 資料夾,js、css、img等資料夾都在 static 中。所有的全都放在「 /static/img/ 」下面,路徑也會自動更改為「 ./static/img/ 」。

配置裡的最難的可能是那個正規表示式,根據不同的需求配置不同的正規表示式,搞定正則就大功告成了!

如果覺得有幫助,就分享給你覺得需要的朋友吧!

vue引入axios 去掉eslint校驗

1.npm install axios registry 2.npm install vue axios registry 3.安裝完畢後,在mian.js中匯入並全域性使用axos和vue axios 4.this.axios 使用 eslint 不管是多人合作還是個人專案,規範都是很重要的。這樣...

vue2開發中如何去掉位址列中的 號

在vue專案的開發中,對於新手的我們,進入專案資料夾後,在資料夾 的如圖所示位置 輸入cmd調出dos命令視窗,然後開始輸入npm run dev命令執行 如圖 紅色部分為專案存放路徑 按enter鍵開始啟動node伺服器 執行成功,然後可以在瀏覽器中輸入localhost 8080 埠號可以自己設...

VC 寫shellcode 時函式位址去掉跳轉表

在預設debug release模式下函式位址不是最終的函式位址,而是e9 offset 的形式,這使得直接使用函式位址作為shellcode 起始位址時會出現問題。該怎麼修改編譯選項呢?在專案屬性中,選擇 配置屬性 c c 優化 全程式優化 選擇 是 gl 這樣就去掉了函式跳轉表。但是這個開關會和...