注：假設你的項目訪問地址為 http://www.a.com/test

　　vue-router默認的路由模式是hash，我們要去掉url中的#需要將路由模式切換為history

const router = new VueRouter({
　base: 'test', // 如果項目項目在 域名 根據目錄下，則去掉這行
  mode: 'history',
  ...
})

　　這樣子，url中的#就可以去掉了，在開發環境下不會出問題，部署上線后點擊正常，但是...你一旦手動點擊瀏覽器的刷新按鈕，頁面顯示nginx的404頁面。

　　怎么解決呢？在vue-router官網有說明：這種模式還需要后臺配置支持。因為我們的應用是個單頁客戶端應用，如果后臺沒有正確的配置，當用戶在瀏覽器直接訪問http://oursite.com/user/id就會返回 404，這就不好看了。

　　所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個index.html頁面，這個頁面就是你 app 依賴的頁面。我們線上的服務器用的是nginx，需要改為下面的配置：

location ^~/test {

     alias   D:/project/card-web/code/dist/;
     try_files  $uri $uri/ @card;
 }
        
 location @card {
     rewrite ^/(test)/(.+)$ /$1/index.html last;
 }
      
 # 項目部署在服務器/下（訪問地址：http://www.a.com）

 location / {
     root   D:/project/card-web/code/dist/;
     try_files $uri $uri/ /index.html;
 }

　　這樣子，無論你怎么刷新頁面都不會報404了。。。賊開心。。。如果你是用vue-cli創建的工程的話，你可能會在線上看到報錯：所有的靜態資源都返回的 index.html 文件 , css或者js請求失敗

　　默認的靜態資源生產環境構建配置應該為：

// config/index.js
build : {
    assetsPublicPath: "./"  
}

　　上述nginx配置的意思就是說以test 開頭的路徑都會返回index.html，而我們構建時的靜態資源還是相對位置（相對于index.html的位置），如果我們把靜態資源都是設置為根路徑（以 / 開頭），瀏覽器會直接從域名根路徑開始請求（相對于域名的位置），請求的靜態資源路徑nginx就能找到，就不用rewrite，

所以我們修改如下：

// config/index.js
build : {
    assetsPublicPath: "/test/", // 如果項目項目在 域名 根據目錄下，則為 "/"
}

總結：

請求靜態資源nginx直接返回，www.baidu.com/test/a/b 等這種路徑nginx統一返回 index.html

我們在工程引用靜態資源（css或者圖片）需要使用相對路徑，如果在js中引用需要require（）引用

總結

以上是生活随笔為你收集整理的vue-router 去掉#的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。