当前位置：首页 > news >正文

Nginx静态资源访问设置

news 来源：原创 2025/5/15 5:20:29

🎉🎉🎉🎉🎉🎉
欢迎访问的个人博客：https://swzbk.site/，加好友，拉你入福利群
🎉🎉🎉🎉🎉🎉

需求： 当静态资源打包采用相对路径，Nginx 访问时首次是 /web，后续访问变为 /web/test/ 这种多一级路径的情况，可通过 Nginx 的配置来确保静态资源能被正确访问，以下提供几种不同的配置方案。

方案一：使用 `rewrite` 结合 `location` 匹配

server {
    listen 80;
    server_name your_domain.com;

    # 处理 /web 开头的请求
    location ^~ /web {
        # 先尝试直接按原路径查找
        try_files $uri $uri/ @rewrite;
    }

    # 重写规则
    location @rewrite {
        # 若原路径找不到，尝试去掉 /test 查找
        rewrite ^/web/test/(.*)$ /web/$1 break;
        root /path/to/your/static/files;
        try_files $uri $uri/ /404.html;
    }
}

配置解释

location ^~ /web：使用 ^~ 修饰符，表示如果匹配到以 /web 开头的请求，就停止后续的正则匹配。try_files $uri $uri/ @rewrite 会先尝试按原请求路径查找文件，如果找不到则跳转到 @rewrite 这个命名 location 块。
location @rewrite：该块是命名 location 块，用于处理文件未找到的情况。rewrite ^/web/test/(.*)$ /web/$1 break 会将 /web/test/ 开头的路径重写为 /web/ 开头，去掉 /test 部分。root 指定静态资源的根目录，try_files 会再次尝试查找文件，若仍找不到则返回 404 页面。

方案二：使用 `alias` 处理不同路径

server {
    listen 80;
    server_name your_domain.com;

    # 处理 /web 路径
    location /web {
        alias /path/to/your/static/files/web;
    }

    # 处理 /web/test 路径
    location /web/test {
        alias /path/to/your/static/files/web;
    }
}

配置解释

location /web：当请求 /web 开头的路径时，alias 会将请求映射到 /path/to/your/static/files/web 目录。
location /web/test：当请求 /web/test 开头的路径时，同样将其映射到 /path/to/your/static/files/web 目录，从而忽略 /test 这一级多余的路径。

方案三：结合正则与 `try_files`

server {
    listen 80;
    server_name your_domain.com;

    location ~ ^/web(/test)?/ {
        rewrite ^/web(/test)?/(.*)$ /web/$2 break;
        root /path/to/your/static/files;
        try_files $uri $uri/ /404.html;
    }
}

配置解释

location ~ ^/web(/test)?/：使用正则表达式匹配以 /web 开头，后面可能跟 /test 的路径。
rewrite ^/web(/test)?/(.*)$ /web/$2 break：将匹配到的路径中 /test 部分去掉，只保留 /web/ 及后面的内容。
root 和 try_files 用于指定静态资源根目录和处理文件查找及 404 情况。