vue項(xiàng)目如何去掉URL中#符號(hào)的方法

更新時(shí)間：2022年07月13日 15:06:12 作者：sunliyings17

在開發(fā)過程中發(fā)現(xiàn)路徑中帶有/#/的標(biāo)示,而且還去不掉,很丑陋,下面這篇文章主要給大家介紹了vue項(xiàng)目如何去掉URL中#符號(hào)的相關(guān)資料,文中通過實(shí)例代碼的非常詳細(xì),需要的朋友可以參考下

前言

最近，同事跟我說，項(xiàng)目的訪問路徑里的/#/挺不美觀的，就下手嘗試去掉，本以為就是一句代碼搞定的事情，結(jié)果遇到不少問題。

現(xiàn)在把我遇到的情況記錄下來(lái)，做個(gè)存檔，如果看到文章的有緣人剛好遇到跟我一樣的情況，我的內(nèi)容能提供多一個(gè)解決方案也是不錯(cuò)的。

正常解決步驟

1. 設(shè)置路由mode

router的默認(rèn)mode為hash模式，關(guān)于hash模式，官方文檔這樣描述：

它在內(nèi)部傳遞的實(shí)際 URL 之前使用了一個(gè)哈希字符（#）。由于這部分 URL 從未被發(fā)送到服務(wù)器，所以它不需要在服務(wù)器層面上進(jìn)行任何特殊處理。不過，它在 SEO 中確實(shí)有不好的影響。如果你擔(dān)心這個(gè)問題，可以使用 HTML5 模式。
– -- 《Vue Router官方文檔》

而關(guān)于history模式，官方文檔是這樣說的：

當(dāng)使用這種歷史模式時(shí)，URL 會(huì)看起來(lái)很 “正常”，例如 https://example.com/user/id。漂亮!

這正符合我們的需求。于是在我們的項(xiàng)目中啟動(dòng)路由mode的history模式：

let Router = new VueRouter({
  mode: 'history',
  routes: [...]
  ...
  });

2. 配置服務(wù)端nginx

關(guān)于history模式，官方文檔還提到：

不過，問題來(lái)了。由于我們的應(yīng)用是一個(gè)單頁(yè)的客戶端應(yīng)用，如果沒有適當(dāng)?shù)姆?wù)器配置，用戶在瀏覽器中直接訪問 https://example.com/user/id，就會(huì)得到一個(gè) 404 錯(cuò)誤。這就丑了。

不用擔(dān)心：要解決這個(gè)問題，你需要做的就是在你的服務(wù)器上添加一個(gè)簡(jiǎn)單的回退路由。如果 URL 不匹配任何靜態(tài)資源，它應(yīng)提供與你的應(yīng)用程序中的 index.html 相同的頁(yè)面。漂亮依舊!

按步驟1修改完，部署到服務(wù)器之后，URL中的#確實(shí)沒有了，但是當(dāng)刷新頁(yè)面，或者頁(yè)面中有使用window.open打開的頁(yè)面時(shí)，會(huì)出現(xiàn)404錯(cuò)誤。
按官方文檔的說明，需要配置服務(wù)器的回退路由，我們的環(huán)境是使用的nginx，使用以下配置解決了刷新404的問題

        location / {
                try_files $uri $uri/ @router;
                index  index.html index.htm app.html app.htm;
         }

        location @router {
                rewrite ^.*$ /index.html break;
        }

如果你的環(huán)境是apache或者其他服務(wù)器，可以參考官方文檔進(jìn)行配置

可能碰到的問題

1. 靜態(tài)資源Uncaught SyntaxError: Unexpected token < 問題

我的項(xiàng)目中有用使用相對(duì)路徑獲取靜態(tài)資源，例如 <img src="./img/xxxx.png" /> 這種方式展示的圖片，這時(shí)候這些圖片都會(huì)拋出 Uncaught SyntaxError: Unexpected token < 404找不到資源的異常，這是由于啟用history模式后相對(duì)路徑造成的問題，將 vue.config.js 文件中 publicPath 或者 bashUrl 從./ 相對(duì)路徑修改為 / 絕對(duì)路徑即可

publicPath = '/';

我的項(xiàng)目環(huán)境中 http://localhost:8080/ 后沒有需要添加固定的路徑，如果你的有（比如 http://localhost:8080/domain/），需要按你的情況進(jìn)行調(diào)整

2. api接口請(qǐng)求404問題

項(xiàng)目部署之后，我發(fā)現(xiàn)有些接口請(qǐng)求出現(xiàn)了404的情況，檢查發(fā)現(xiàn) api 的axios 配置時(shí)的路徑配置存在相對(duì)路徑的使用，需要進(jìn)行修改
調(diào)整之前的配置:

export const exampleApi = (id) => {
  return request({
    url: 'xxx/xxx/' + id,
    method: 'get',
  })
}

配置修改為:

export const exampleApi = (id) => {
  return request({
    url: '/xxx/xxx/' + id,
    method: 'get',
  })
}

3. 開發(fā)環(huán)境（npm run dev啟動(dòng)）刷新404的問題

這個(gè)問題困擾我不少時(shí)間，網(wǎng)上也沒有找到網(wǎng)友有類似的情況，最后發(fā)現(xiàn)是因?yàn)殚_發(fā)環(huán)境調(diào)試時(shí)，為了解決跨域問題，在項(xiàng)目中配置了 webpack devServer 的 proxy，代理處理了所有的請(qǐng)求，通過使用 bypass 繞過html，就可以解決此問題

# vue.config.js文件
devServer: {
    proxy: {
      '/': {
        target: url,
        ...
        bypass: function (req, res, proxyOptions) {
          if (req.headers.accept.indexOf('html') !== -1) {
            console.log('Skipping proxy for browser request.');
            return '/index.html';
          }
        },
      },
  }
}

4. 前端路由與服務(wù)端接口路由沖突問題

前面三個(gè)問題解決后，本來(lái)以為已經(jīng)全部正常。但是再測(cè)試發(fā)現(xiàn)，部分頁(yè)面刷新仍然會(huì)出現(xiàn)問題，但是通過前端的排查未能發(fā)現(xiàn)原因。直到檢查到nginx的配置時(shí)，發(fā)現(xiàn)這些出錯(cuò)誤的頁(yè)面的路由，與服務(wù)端的接口路由似乎是重合的！這些前端頁(yè)面的路由被nginx匹配到服務(wù)端的路由，轉(zhuǎn)發(fā)到服務(wù)端去處理，所以發(fā)生異常了！

解決問題的思路為，前端程序中給所有的接口添加統(tǒng)一的路由前綴入口，nginx轉(zhuǎn)發(fā)時(shí)匹配這個(gè)統(tǒng)一的前綴即可。

axios.js：

# 設(shè)置bashURL
axios.defaults.baseURL = "/api";

nginx配置文件：

location ^~ /api/ {
      proxy_pass http://pig-gateway:9999/;
      # proxy_set_header Host $http_host;
      proxy_connect_timeout 60s;
      proxy_send_timeout 45s;
      proxy_read_timeout 450s;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }

開發(fā)環(huán)境跨域設(shè)置調(diào)整

vue.config.js：

  devServer: {
  ...
    proxy: {
       ...
      '/api': {
        target: url,
        changeOrigin: true,
        logLevel: 'debug'
      },
    },
     ...
 }