添加Nginx location /配置后访问/dashboard/出现404资源加载错误

添加location /配置后，浏览器请求的静态资源（如/static/js/main.3fbc94f0.js）并未匹配到location ^~ /dashboard/规则，而是被优先级更低但匹配范围更广的location /捕获，转发到了http://127.0.0.1:5000后端服务。由于后端服务不存在这些静态资源，因此返回404错误。

核心矛盾在于：前端页面加载时，静态资源的请求路径以根路径开头（比如/static/xxx），而非/dashboard/static/xxx，因此无法命中针对/dashboard/的location规则。

以下是几种可行的解决方案：

方案1：调整前端资源基础路径 #

修改前端项目配置，将资源的基础路径（publicPath）设置为/dashboard/，重新打包部署即可：

• Vue项目：在vue.config.js中添加publicPath: '/dashboard/'
• React项目：在package.json中添加"homepage": "/dashboard/"

打包后静态资源的请求路径会变为/dashboard/static/js/xxx.js，此时会被location ^~ /dashboard/规则匹配，正确从/var/www/html/目录加载资源。

方案2：新增Nginx静态资源location规则 #

在现有配置中添加专门匹配静态资源的location，优先级高于location /：

server_name example.com;

root /var/www/html;
index index.html index.htm index.nginx-debian.html;

location ^~ /dashboard/ {
    alias /var/www/html/;
    try_files $uri $uri/ /index.html;
}

# 匹配所有/static/开头的静态资源请求
location ^~ /static/ {
    root /var/www/html;
    try_files $uri =404;
}

# 精准匹配根路径下的manifest.json
location = /manifest.json {
    root /var/www/html;
}

location / {
    proxy_pass http://127.0.0.1:5000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

^~ /static/会优先捕获所有静态资源请求，直接从/var/www/html/static/目录返回文件；location = /manifest.json确保根路径下的manifest文件被正确加载。

方案3：修改现有dashboard location规则 #

调整location ^~ /dashboard/中的try_files逻辑，配合rewrite处理路径前缀：

location ^~ /dashboard/ {
    alias /var/www/html/;
    try_files $uri $uri/ /dashboard/index.html;
    rewrite ^/dashboard/(.*)$ /$1 break;
}

该方案通过rewrite去除/dashboard/前缀，确保资源路径正确映射到实际文件目录，同时回退页面指向带前缀的/dashboard/index.html，避免被location /代理。

内容的提问来源于stack exchange，提问作者Kevvv