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;
    }
}
posted @ 2023-09-04 15:35  邹姣姣  阅读(88)  评论(0编辑  收藏  举报