Nuxt.js静态项目升级后生产环境/legal路由访问异常

这个问题是Nginx静态路由规则和Nuxt 2.15.x版本的静态生成逻辑不匹配导致的，和业务代码逻辑无关：

• 之前使用的Nuxt 2.12版本，执行nuxt generate时默认会给/legal这类静态路由生成dist/legal/index.html的目录结构，Nginx默认的目录索引规则可以直接命中，访问/legal时会自动返回对应目录下的index.html，所以旧版本部署正常。
• 升级到Nuxt 2.15.8且使用target:static模式后，静态资源生成的默认规则发生了变化：如果没有显式配置generate.subFolders: true，部分静态路由会直接生成同级的dist/legal.html文件，不再创建子目录存放index.html。
• 当前使用的Nginx配置没有适配这个变更：访问/legal路径时，Nginx会先查找路径对应的实体文件，找不到/legal文件、也没有配置自动匹配.html后缀的规则时，就直接触发兜底逻辑返回了根目录的/index.html，所以状态码显示200，但实际渲染的是首页内容。
• 本地nuxt dev是开发模式，自带路由匹配逻辑，不会经过Nginx的静态文件查找流程，所以所有功能表现正常。

二选一即可，优先选方案1，不用改动项目代码：

方案1：调整Nginx配置适配Nuxt新版本生成规则 #

修改项目里的nginx/nginx.conf，补充静态文件匹配顺序和正确的兜底页配置，参考如下：

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        # 匹配顺序：原路径 -> 原路径加.html后缀 -> 原路径对应目录 -> 兜底到Nuxt生成的200.html
        try_files $uri $uri.html $uri/ /200.html;
    }

    # 可选：静态资源长缓存配置
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

注意不要把兜底路径写成/index.html，否则所有未命中的路由都会被渲染成首页。配置修改后重新构建Docker镜像即可生效。

方案2：修改Nuxt配置对齐旧版生成行为 #

如果不想改Nginx配置，可以在nuxt.config.js中显式指定generate规则，强制静态文件生成逻辑和旧版保持一致：

export default {
  // 保留原有其他配置不变
  generate: {
    subFolders: true, // 强制所有路由生成子目录+index.html结构
    fallback: '200.html' // 显式指定兜底页，避免版本默认值差异
  },
  router: {
    trailingSlash: false // 保持路由不带尾斜杠的旧行为
  }
}

修改后重新执行npm run generate，确认dist目录下/legal路径为子目录存放index.html的结构，原有Nginx配置不用大改即可正常访问。

1. 本地执行完npm run generate后，先用npx serve dist启动本地静态服务，手动输入/legal地址刷新测试，确认本地静态服务访问正常后再打包Docker镜像
2. 镜像启动后可以进入容器，检查Nginx配置是否正确加载，再测试路由访问即可

额外说明：当前nuxt.config.js开头引入了axios但全程没有使用，不会影响功能，但可以删掉避免不必要的构建警告；旧版本依赖里的@nuxtjs/dotenv在Nuxt 2.13+版本已经内置，新版本移除这个依赖是正确的。

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