快捷導(dǎo)航

詳解nginx配置vue h5 history去除#號(hào)

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

這篇文章主要介紹了詳解nginx配置vue h5 history去除#號(hào)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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

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

然后就是打包的配置：

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

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)

所以，請(qǐng)謹(jǐn)慎配置，坑比較多，下面就是nginx服務(wù)端的配置了，

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ù)路由設(shè)置，避免出現(xiàn)404
    location ^~ /api/ {
        add_header 'Access-Control-Allow-Origin' '*';
        proxy_pass http://service.xxxx.com/;
    }
    location / {
      try_files $uri $uri/ @router;#需要指向下面的@router否則會(huì)出現(xiàn)vue的路由在nginx中刷新出現(xiàn)404
      index index.html index.htm;
    }
    #對(duì)應(yīng)上面的@router，主要原因是路由的路徑資源并不是一個(gè)真實(shí)的路徑，所以無(wú)法找到具體的文件
    #因此需要rewrite到index.html中，然后交給路由在處理請(qǐng)求資源
    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 {
    }
  }

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

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

您可能感興趣的文章: