react/vue router采用browser history，nginx如何配置？

多年前《VueRouter和ReactRouter原理:$router与$route区别，见习React Router 4.0》

那时候，主要还是以hash router为主，但是随着服务端渲染的崛起，即使我们采用前端渲染的方案，还是希望采用 browser history模式，为以后无缝迁移到服务端渲染

但是，如过没有做好服务端渲染的准备，而前端直接采用createBrowserRouter，那么就无法加载资源，导致白屏！

整体配置如下：

# nginx.conf整体配置大概如下：
http {
    # 开启gzip
    gzip on;
    # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
    gzip_min_length 1k;
    # gzip 压缩级别，1-10，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明
    gzip_comp_level 1;
    # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php;
    # 是否在http header中添加Vary: Accept-Encoding，建议开启
    gzip_vary on;
    # 禁用IE 6 gzip
    gzip_disable "MSIE [1-6]\.";

    server {
        listen 80;
        root  /www/zhoulujun.cn;
        location /app {
            root   html;
            index  index.html;
            # url 切换时始终返回index.html
            try_files $uri /app/index.html;
        }
        
        location ~* \.(gif|jpg|png|js|css)$ {
            access_log off;
            expires    365d;
            root  /www/zhoulujun.cn/static;
        }
        
        # html/xml/json 文件不缓存
        location ~* /app/screen {

            expires    -1;
            #try_files $uri $uri/ /usr/local/services/app_logical_server-1.0/bin/app/screen/index.html;
            root  /www/zhoulujun.cn;
           try_files $uri $uri/ /react/index.html;
        }
    }
}

其核心就是：try_files $uri $uri/ /react/index.html;

参考文章：

https://www.cnblogs.com/qianxiaox/p/14120005.html

https://blog.csdn.net/songmeinuo/article/details/126428934

转载本站文章《react/vue router采用browser history，nginx如何配置？》,
请注明出处：https://www.zhoulujun.cn/html/tools/webServer/nginx/2025_0324_9525.html