詳解nginx配置vue h5 history去除#號

更新時間：2020年11月09日 10:54:30 作者：IT_DLin

這篇文章主要介紹了詳解nginx配置vue h5 history去除#號，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

vue的默認配置是使用hash模式，這樣我們訪問的時候都帶有了一個#號，再支付回調(diào)的地址或者其他原因不支持#號或者不喜歡#號這種模式，優(yōu)勢就出現(xiàn)了需要去除#號，于是vue端就需要配置該模式，并且使用懶加載，vue端的配置如下：

首先先聲明一下，這是使用vue+nginx實現(xiàn)前后端分離的項目，并且使用vue axios實現(xiàn)代理功能(允許跨域并且服務端已經(jīng)開啟跨域)，

然后就是打包的配置：

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

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;

    #根據(jù)路由設置，避免出現(xiàn)404
    location ^~ /api/ {
        add_header 'Access-Control-Allow-Origin' '*';
        proxy_pass http://service.xxxx.com/;
    }
    location / {
      try_files $uri $uri/ @router;#需要指向下面的@router否則會出現(xiàn)vue的路由在nginx中刷新出現(xiàn)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 {
    }
  }

這樣配置就算是配置好了，然后就不會出現(xiàn)頁面刷新顯示404的錯誤了。

到此這篇關于詳解nginx配置vue h5 history去除#號的文章就介紹到這了,更多相關nginx配置h5去除#號內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: