注：假設(shè)你的項(xiàng)目訪問(wèn)地址為 http://www.a.com/test

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

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

　　這樣子，url中的#就可以去掉了，在開(kāi)發(fā)環(huán)境下不會(huì)出問(wèn)題，部署上線后點(diǎn)擊正常，但是...你一旦手動(dòng)點(diǎn)擊瀏覽器的刷新按鈕，頁(yè)面顯示nginx的404頁(yè)面。

　　怎么解決呢？在vue-router官網(wǎng)有說(shuō)明：這種模式還需要后臺(tái)配置支持。因?yàn)槲覀兊膽?yīng)用是個(gè)單頁(yè)客戶(hù)端應(yīng)用，如果后臺(tái)沒(méi)有正確的配置，當(dāng)用戶(hù)在瀏覽器直接訪問(wèn)http://oursite.com/user/id就會(huì)返回 404，這就不好看了。

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

location ^~/test {

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

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

　　這樣子，無(wú)論你怎么刷新頁(yè)面都不會(huì)報(bào)404了。。。賊開(kāi)心。。。如果你是用vue-cli創(chuàng)建的工程的話(huà)，你可能會(huì)在線上看到報(bào)錯(cuò)：所有的靜態(tài)資源都返回的 index.html 文件 , css或者js請(qǐng)求失敗

　　默認(rèn)的靜態(tài)資源生產(chǎn)環(huán)境構(gòu)建配置應(yīng)該為：

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

　　上述nginx配置的意思就是說(shuō)以test 開(kāi)頭的路徑都會(huì)返回index.html，而我們構(gòu)建時(shí)的靜態(tài)資源還是相對(duì)位置（相對(duì)于index.html的位置），如果我們把靜態(tài)資源都是設(shè)置為根路徑（以 / 開(kāi)頭），瀏覽器會(huì)直接從域名根路徑開(kāi)始請(qǐng)求（相對(duì)于域名的位置），請(qǐng)求的靜態(tài)資源路徑nginx就能找到，就不用rewrite，

所以我們修改如下：

// config/index.js
build : {
    assetsPublicPath: "/test/", // 如果項(xiàng)目項(xiàng)目在 域名 根據(jù)目錄下，則為 "/"
}

總結(jié)：

請(qǐng)求靜態(tài)資源nginx直接返回，www.baidu.com/test/a/b 等這種路徑nginx統(tǒng)一返回 index.html

我們?cè)诠こ桃渺o態(tài)資源（css或者圖片）需要使用相對(duì)路徑，如果在js中引用需要require（）引用

總結(jié)

以上是生活随笔為你收集整理的vue-router 去掉#的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。