vue項目如何去掉URL中#符號的方法

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

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

前言

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

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

正常解決步驟

1. 設置路由mode

router的默認mode為hash模式，關于hash模式，官方文檔這樣描述：

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

而關于history模式，官方文檔是這樣說的：

當使用這種歷史模式時，URL 會看起來很 “正常”，例如 https://example.com/user/id。漂亮!

這正符合我們的需求。于是在我們的項目中啟動路由mode的history模式：

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

2. 配置服務端nginx

關于history模式，官方文檔還提到：

不過，問題來了。由于我們的應用是一個單頁的客戶端應用，如果沒有適當?shù)姆掌髋渲?，用戶在瀏覽器中直接訪問 https://example.com/user/id，就會得到一個 404 錯誤。這就丑了。

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

按步驟1修改完，部署到服務器之后，URL中的#確實沒有了，但是當刷新頁面，或者頁面中有使用window.open打開的頁面時，會出現(xiàn)404錯誤。
按官方文檔的說明，需要配置服務器的回退路由，我們的環(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或者其他服務器，可以參考官方文檔進行配置

可能碰到的問題

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

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

publicPath = '/';

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

2. api接口請求404問題

項目部署之后，我發(fā)現(xiàn)有些接口請求出現(xiàn)了404的情況，檢查發(fā)現(xiàn) api 的axios 配置時的路徑配置存在相對路徑的使用，需要進行修改
調(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啟動）刷新404的問題

這個問題困擾我不少時間，網(wǎng)上也沒有找到網(wǎng)友有類似的情況，最后發(fā)現(xiàn)是因為開發(fā)環(huán)境調(diào)試時，為了解決跨域問題，在項目中配置了 webpack devServer 的 proxy，代理處理了所有的請求，通過使用 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. 前端路由與服務端接口路由沖突問題

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

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

axios.js：

# 設置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)境跨域設置調(diào)整

vue.config.js：

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