Nuxt静态文件夹文件部署至AWS Amplify后无法在iframe中显示

问题背景 #

本地运行npm run dev/npm run start时，iframe可正常加载static/modules/module/story.html；但部署到AWS Amplify预发布环境后，出现"Page not found"错误，控制台无报错。使用Nuxt 2.15.8，target设为static，ssr关闭，通过npm run generate构建。

可能的原因及解决方案 #

1. 本地构建后dist目录是否包含目标文件 #

先在本地执行npm run generate，检查dist文件夹下是否存在modules/module/story.html：

• 如果不存在：说明Nuxt未正确复制static目录内容，检查是否有自定义的构建配置排除了该文件，或者确认文件未被.gitignore忽略。
• 如果存在：继续排查后续点。

2. 确认目标文件已提交到Git #

AWS Amplify只会部署Git仓库中已跟踪的文件，检查static/modules/module/story.html是否已被提交：

• 执行git status查看文件状态，若为未跟踪，执行git add static/modules/module/story.html并提交。

3. 检查iframe的src路径 #

确保iframe使用绝对路径且大小写完全匹配：

• 正确路径示例：<iframe src="/modules/module/story.html"></iframe>
• 避免使用相对路径（如../modules/module/story.html），因为静态部署后页面路由可能处于子目录，相对路径会指向错误位置；同时注意Linux环境（Amplify运行环境）对文件名大小写敏感，路径必须和实际文件完全一致。

4. 查看Amplify构建日志 #

登录AWS Amplify控制台，找到对应构建任务的日志：

• 确认npm run generate执行无报错，且日志中存在复制static文件到dist的记录。
• 若构建日志显示文件未生成，尝试清理构建缓存：修改amplify.yml的preBuild步骤，添加清理dist目录的命令：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - rm -rf dist
        - npm ci
    build:
      commands:
        - npm run generate
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

5. 本地模拟Amplify部署环境 #

使用静态服务器运行本地生成的dist目录，验证是否能正常加载iframe：

• 执行npx serve dist，访问本地服务器地址，查看iframe是否正常显示。如果这里也出现404，说明问题出在Nuxt构建环节，而非Amplify配置。

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