vue的預設配置是使用hash模式，這樣我們訪問的時候都帶有了一個#號，再支付回撥的地址或者其他原因不支援#號或者不喜歡#號這種模式，優勢就出現了需要去除#號，於是vue端就需要配置該模式，並且使用懶載入，vue端的配置如下：

首先先宣告一下，這是使用vue+nginx實現前後端分離的專案，並且使用vue axios實現代理功能(允許跨域並且服務端已經開啟跨域)，

然後就是打包的配置：

!!!注意，這裡配置的assetsPublicPath一定要配置成 "/" 而不是 "./"之類的，不然nginx服務端即使配置成為了vue h5 history模式，也會出現如下錯誤:

Uncaught SyntaxError: Unexpected token <
manifest.16a4233693dc526194f6.js:1 Error: Loading chunk 23 failed.
  at HTMLScriptElement.t (manifest.16a4233693dc526194f6.js:1)
d.oe @ manifest.16a4233693dc526194f6.js:1
Promise.catch (async)
component @ app.a879af571e30c08073af.js:1
(anonymous) @ vendor.8f8ebced8a21d4a0633a.js:6
(anonymous) @ vendor.8f8ebced8a21d4a0633a.js:6
(anonymous) @ vendor.8f8ebced8a21d4a0633a.js:6
ve @ vendor.8f8ebced8a21d4a0633a.js:6
(anonymous) @ vendor.8f8ebced8a21d4a0633a.js:6
h @ vendor.8f8ebced8a21d4a0633a.js:6
i @ vendor.8f8ebced8a21d4a0633a.js:6
i @ vendor.8f8ebced8a21d4a0633a.js:6
(anonymous) @ vendor.8f8ebced8a21d4a0633a.js:6
(anonymous) @ vendor.8f8ebced8a21d4a0633a.js:6
(anonymous) @ app.a879af571e30c08073af.js:1
h @ vendor.8f8ebced8a21d4a0633a.js:6
i @ vendor.8f8ebced8a21d4a0633a.js:6
i @ vendor.8f8ebced8a21d4a0633a.js:6
i @ vendor.8f8ebced8a21d4a0633a.js:6
pe @ vendor.8f8ebced8a21d4a0633a.js:6
_e.confirmTransition @ vendor.8f8ebced8a21d4a0633a.js:6
_e.transitionTo @ vendor.8f8ebced8a21d4a0633a.js:6
t.push @ vendor.8f8ebced8a21d4a0633a.js:6
Pe.push @ vendor.8f8ebced8a21d4a0633a.js:6
b @ vendor.8f8ebced8a21d4a0633a.js:6
t @ vendor.8f8ebced8a21d4a0633a.js:12
Fi.t._withTask.s._withTask @ vendor.8f8ebced8a21d4a0633a.js:12
vendor.8f8ebced8a21d4a0633a.js:6 Error: Loading chunk 23 failed.
  at HTMLScriptElement.t (manifest.16a4233693dc526194f6.js:1)

所以，請謹慎配置，坑比較多，下面就是nginx服務端的配置了，

server {
    listen    80 default_server;
    listen    [::]:80 default_server;
    server_name _;
    root     /usr/share/nginx/dist;

    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;

    #根據路由設定，避免出現404
    location ^~ /api/ {
        add_header 'Access-Control-Allow-Origin' '*';
        proxy_pass http://service.xxxx.com/;
    }
    location / {
      try_files $uri $uri/ @router;#需要指向下面的@router否則會出現vue的路由在nginx中刷新出現404
      index index.html index.htm;
    }
    #對應上面的@router，主要原因是路由的路徑資源並不是一個真實的路徑，所以無法找到具體的檔案
    #因此需要rewrite到index.html中，然後交給路由在處理請求資源
    location @router {
      rewrite ^.*$ /index.html last;
    }
    error_page 404 /404.html;
      location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
      location = /50x.html {
    }
  }

這樣配置就算是配置好了，然後就不會出現頁面重新整理顯示404的錯誤了。

到此這篇關於詳解nginx配置vue h5 history去除#號的文章就介紹到這了,更多相關nginx配置h5去除#號內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！