Nginx解决前端history路由模式下页面刷新404
前端vue中的配置:
historyApiFallback: {
rewrites: [
{ from: /^\/$/, to: '/index.html' },
{ from: /^\/shareChart\/\w/, to: '/shareChart.html' },
{ from: /^\/shareDashboard\/\w/, to: '/shareDashboard.html' },
{ from: /^\/shareStoryPlayer\/\w/, to: '/shareStoryPlayer.html' },
],
},
原配置:
server {
listen 80;
server_name localhost;
gzip on;
gzip_static on; # 需要http_gzip_static_module 模块
gzip_min_length 1k;
gzip_comp_level 4;
gzip_proxied any;
gzip_types text/plain text/xml text/css;
gzip_vary on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
client_max_body_size 100m;
root /data/;
}
问题:输入域名能访问,但是F5页面刷新404
解决办法:
server {
listen 80;
server_name localhost;
gzip on;
gzip_static on; # 需要http_gzip_static_module 模块
gzip_min_length 1k;
gzip_comp_level 4;
gzip_proxied any;
gzip_types text/plain text/xml text/css;
gzip_vary on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
client_max_body_size 100m;
# 解决history路由模式404的配置
location / {
root /data/;
index index.html index.htm;
try_files $uri $uri/ /index.html;
#注意前端vue中的rewrite在nginx中也需要加上对应的
rewrite ^/shareChart/?(.*) /shareChart.html break;
rewrite ^/shareDashboard/?(.*) /shareDashboard.html break;
rewrite ^/shareStoryPlayer/?(.*) /shareStoryPlayer.html break;
}
}