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;
}
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)