你們是否想過如何優(yōu)化訪問路徑里的/#/，看起來有簡(jiǎn)單又美觀，現(xiàn)在我們一起看看實(shí)現(xiàn)?，F(xiàn)在就為大家展示解決方法。

　　正常解決步驟

　　1. 設(shè)置路由mode

　　先說下router的默認(rèn)mode為hash模式，有關(guān)于hash模式介紹如下：

　　hash并不能作為傳遞，也無法將URL發(fā)送到服務(wù)器中，因此，無法到服務(wù)器中進(jìn)行處理。而且它對(duì)于SEO優(yōu)化也有不好的影響。我們可以換換想法，用可以使用 HTML5 模式。

　　– -- 《Vue Router官方文檔》

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

　　現(xiàn)在我就看看這種模式下的URL，怎么樣， 看起來很 “正常”，例如 https://example.com/user/id。漂亮!

　　對(duì)于我們的需求也十分滿足。于是在我們的項(xiàng)目中啟動(dòng)路由mode的history模式：

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

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

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

     其中要有一個(gè)問題要我們解決，就是應(yīng)用是一個(gè)單頁的客戶端應(yīng)用，假如在沒有適當(dāng)?shù)姆?wù)器配置情況下，訪客直接在瀏覽器中輸入網(wǎng)址，出現(xiàn)的就會(huì)是404頁面。

　　解決：其實(shí)我們只要在所屬服務(wù)器上添加一個(gè)簡(jiǎn)單的回退路由。當(dāng)在你的 URL 不匹配任何靜態(tài)資源，它應(yīng)提供與你的應(yīng)用程序中的 index.html 相同的頁面。

　　即使完成上述步驟，還是沒有徹底解決問題，因此，我們還需要后續(xù)。按官方文檔的說明，需要配置服務(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 < 問題

　　在使用相對(duì)路徑獲取靜態(tài)資源，例如 <img src="./img/xxxx.png" /> 這種方式展示的圖片，這些反饋的就會(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問題

　　其實(shí)問題還是有，在檢查時(shí)發(fā)現(xiàn)有些接口出現(xiàn)了404的情況， 現(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的問題

　　其實(shí)這樣問題也一直困擾我，直至在開發(fā)環(huán)境調(diào)試時(shí)，為了解決跨域問題，就需要設(shè)置配置 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ù)端接口路由沖突問題

　　在解決前面問題之后，在排查時(shí)任然發(fā)現(xiàn)部分頁面在刷新出現(xiàn)錯(cuò)誤。檢查很多地方，直至我們檢查到nginx的配置時(shí)，出現(xiàn)這些錯(cuò)誤的原因是頁面的路由，與服務(wù)端的接口路由似乎是重合的！由此將前端頁面的路由被nginx匹配到服務(wù)端的路由，這樣就是直接轉(zhuǎn)接到服務(wù)端去處理，異常就由此產(chǎn)生！

　　解決問題的思路為，前端程序中給所有的接口添加統(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'
　　},
　　},
　　...
　　}

　　結(jié)尾

　　有關(guān)于vue項(xiàng)目如何去掉URL中#符號(hào)的方法已經(jīng)敘述完畢，希望大家后續(xù)多多關(guān)注。