你們是否想過如何優化訪問路徑里的/#/，看起來有簡單又美觀，現在我們一起看看實現。現在就為大家展示解決方法。

　　正常解決步驟

　　1. 設置路由mode

　　先說下router的默認mode為hash模式，有關于hash模式介紹如下：

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

　　– -- 《Vue Router官方文檔》

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

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

　　對于我們的需求也十分滿足。于是在我們的項目中啟動路由mode的history模式：

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

　　2. 配置服務端nginx

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

     其中要有一個問題要我們解決，就是應用是一個單頁的客戶端應用，假如在沒有適當的服務器配置情況下，訪客直接在瀏覽器中輸入網址，出現的就會是404頁面。

　　解決：其實我們只要在所屬服務器上添加一個簡單的回退路由。當在你的 URL 不匹配任何靜態資源，它應提供與你的應用程序中的 index.html 相同的頁面。

　　即使完成上述步驟，還是沒有徹底解決問題，因此，我們還需要后續。按官方文檔的說明，需要配置服務器的回退路由，我們的環境是使用的nginx，使用以下配置解決了刷新404的問題

　　location / {
　　try_files $uri $uri/ @router;
　　index index.html index.htm app.html app.htm;
　　}
　　location @router {
　　rewrite ^.*$ /index.html break;
　　}

　　如果你的環境是apache或者其他服務器，可以參考官方文檔進行配置

　　可能碰到的問題

　　1. 靜態資源Uncaught SyntaxError: Unexpected token < 問題

　　在使用相對路徑獲取靜態資源，例如 <img src="./img/xxxx.png" /> 這種方式展示的圖片，這些反饋的就會是 Uncaught SyntaxError: Unexpected token < 404找不到資源的異常，主要是就是啟用history模式后相對路徑造成的問題，但我們要是將 vue.config.js 文件中 publicPath 或者 bashUrl 從./ 相對路徑修改為 / 絕對路徑就可以輕松解決。

　　publicPath = '/';

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

　　2. api接口請求404問題

　　其實問題還是有，在檢查時發現有些接口出現了404的情況， 現在我們就可以用api 的axios 配置時的路徑配置存在相對路徑的使用，需要進行修改。

　　調整之前的配置:

　　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. 開發環境（npm run dev啟動）刷新404的問題

　　其實這樣問題也一直困擾我，直至在開發環境調試時，為了解決跨域問題，就需要設置配置 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. 前端路由與服務端接口路由沖突問題

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

　　解決問題的思路為，前端程序中給所有的接口添加統一的路由前綴入口，nginx轉發時匹配這個統一的前綴即可。

　　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;
　　}

　　開發環境跨域設置調整

　　vue.config.js：　

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

　　結尾

　　有關于vue項目如何去掉URL中#符號的方法已經敘述完畢，希望大家后續多多關注。