如何配置Nginx代理Nuxt应用并解决静态资源404问题

问题根源：你的Nuxt应用默认将静态资源路径设为网站根目录（比如/runtime.js），但通过Nginx代理到/admin路径后，浏览器会尝试从localdomain.local/runtime.js加载资源，而非localdomain.local/admin/runtime.js，导致404错误。

以下是两种可行的解决方法：

方法一：修改Nuxt的基础路径配置（推荐） #

让Nuxt生成的所有资源和路由都自动带上/admin前缀：

• Nuxt 3：在nuxt.config.ts中添加配置：

export default defineNuxtConfig({
  app: {
    baseURL: '/admin/'
  }
})

• Nuxt 2：在nuxt.config.js中添加配置：

export default {
  router: {
    base: '/admin/'
  }
}

修改完成后重启Nuxt服务，此时Nuxt输出的index.html里的资源路径会自动变成/admin/runtime.js这类，浏览器就能正确请求到资源。

方法二：修改Nginx配置，重写资源请求路径 #

如果不想改动Nuxt配置，可以通过Nginx拦截静态资源请求，转发到Nuxt服务器：
修改你的Nginx配置中的server块，添加以下规则：

# 拦截Nuxt的静态资源路径（Nuxt 3默认资源路径以/_nuxt/开头，Nuxt 2以/_nuxt/或/static/开头，可根据实际调整）
location ~ ^/_nuxt/ {
    proxy_pass http://host.docker.internal:3001;
    proxy_set_header Host $host:$proxy_port;
    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;
}

# 额外处理直接根路径的静态资源（如runtime.js、common.js等）
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    # 仅处理来自/admin页面的资源请求
    if ($http_referer ~* /admin/) {
        proxy_pass http://host.docker.internal:3001;
        proxy_set_header Host $host:$proxy_port;
        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;
    }
}

修改后重启Nginx服务，即可让浏览器请求的静态资源被正确转发到Nuxt服务器。

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