无法将Nuxt3静态应用部署到子文件夹的问题排查

1. 解决访问/private直接返回403，必须加index.html才能访问的问题 #

CloudFront配置调整 #

• 给/private/*的行为设置默认根对象为index.html
• 配置错误页规则：把403错误码重定向到/private/index.html，状态码设为200

S3桶权限检查 #

• 确保第二个S3桶里private文件夹下的index.html权限正确（要么设为公开可读，要么通过CloudFront OAC配置好访问权限，避免S3直接拦截请求）

2. 修复动态生成JS的路径错误导致403的问题 #

补全Nuxt3配置 #

仅设置app.baseURL不够，需同步配置路由基础路径，修改nuxt.config.js：

export default defineNuxtConfig({
  app: {
    baseURL: process.env.NUXT_APP_BASE_URL || '/private/' // 注意结尾要带斜杠
  },
  router: {
    base: process.env.NUXT_APP_BASE_URL || '/private/' // 和app.baseURL保持一致
  },
  generate: {
    // 静态生成时需包含所有需要的路由
    routes: ['/private/', '/private/你的其他路由']
  }
})

修正动态脚本的路径生成逻辑 #

如果是自定义或第三方脚本动态创建script标签，别硬写路径，用Nuxt的useRuntimeConfig()获取正确的baseURL：

// 组件内示例写法
const config = useRuntimeConfig()
const scriptUrl = `${config.app.baseURL}你要加载的脚本路径.js`

3. 修正404页面的首页链接指向主域名的问题 #

自定义404页面 #

在项目的pages文件夹下新建404.vue，手动指定首页链接到子路径：

<template>
  <div>
    <h1>页面未找到</h1>
    <NuxtLink to="/private/">返回首页</NuxtLink>
  </div>
</template>

确保静态生成包含404页面 #

在nuxt.config.js的generate配置里添加404路由：

generate: {
  routes: [..., '/private/404']
}

同时在CloudFront的行为里，把404错误页重定向到/private/404.html，状态码保持404

最后验证步骤 #

1. 重新生成静态文件：执行npm run generate，检查.output/public下的所有资源路径是否都以/private/开头
2. 检查CloudFront行为优先级：/private/*的行为优先级要高于默认行为，路径匹配规则不能写错
3. 清除CloudFront缓存：修改配置后必须清缓存，避免旧配置生效

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