Docker部署Nuxt静态应用至Nginx子目录遇404问题

在Docker本地环境中，我把Nuxt 2静态应用部署到子目录private/，通过Nginx将localhost:81/private的流量路由到该应用。目前localhost:81/上的另一个Nuxt应用运行正常，但访问子目录应用时显示“This page could not be found”页面。

现有配置 #

嵌套Nuxt应用配置

• Nuxt版本：^2.16.0，通过nuxi generate命令生成静态文件
• 页面结构：仅包含根索引页/，pages/目录下只有index.vue文件
• nuxt.config.js配置：app.baseURL = '/private'
• 生成文件验证：页面源码中所有脚本URL已自动添加/private/前缀，例如href="/private/_nuxt/19290fb.js"

Nginx配置

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;
    index  index.html index.htm;

    location /private {
        alias   /usr/share/nginx/html/private;
        try_files $uri $uri/ /index.html;
    }

    location / {
        root   /usr/share/nginx/html/public;
        try_files $uri $uri/ /index.html;
    }

    # 其他默认Nginx配置未修改
}

更新发现 #

最后一个脚本由localhost:81/而非/private提供，且由其他脚本触发加载，存在资源路径生成错误的问题。

修复方案 #

1. 修正Nginx的try_files规则

使用alias时，原配置的try_files最后回退到/index.html会指向根应用的索引文件，导致子目录应用无法正确加载。修改location /private块：

location /private {
    alias   /usr/share/nginx/html/private;
    try_files $uri $uri/ /private/index.html;  # 指定子目录的索引文件路径
}

这样Nginx会通过alias映射到/usr/share/nginx/html/private/index.html，而不是根应用的文件。

2. 补充Nuxt 2的router.base配置

Nuxt 2仅设置app.baseURL不足以覆盖客户端路由的基础路径，需要同时配置路由参数。在nuxt.config.js中添加：

export default {
  app: {
    baseURL: '/private/'  // 建议末尾加斜杠，避免路径拼接异常
  },
  router: {
    base: '/private/'
  }
}

修改后重新执行nuxi generate生成静态文件，替换Docker中对应的目录文件。

3. 修复动态加载脚本的路径问题

如果仍有脚本从根路径加载，检查自定义代码或第三方库中的资源路径生成逻辑，确保所有路径都基于Nuxt注入的process.env.BASE_URL生成：

// 错误示例：硬编码根路径
const scriptUrl = '/_nuxt/dynamic-script.js'
// 正确示例：使用环境变量拼接路径
const scriptUrl = `${process.env.BASE_URL}_nuxt/dynamic-script.js`

验证步骤 #

1. 重启Nginx容器，确保配置生效
2. 访问localhost:81/private，打开浏览器控制台查看网络请求，确认所有资源的请求路径都以/private/开头
3. 检查页面是否正常渲染，无404错误

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