nginx配置vue h5 history去除#號

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的錯誤了。

原文：https://blog.csdn.net/qq_35267557/article/details/81182097