Vue3项目部署AWS Amplify时构建成功但部署失败求助

一、强制获取详细错误日志 #

AWS Amplify默认可能隐藏部署阶段的详细错误，你可以通过以下方式开启：

• 在amplify.yml的部署阶段添加set -x指令，强制输出调试信息：

  deploy:
    commands:
      - set -x
      - amplify publish --override
  

• 查看Amplify控制台的部署历史→对应部署记录→日志标签下的完整日志，滚动到最底部查找具体报错信息，不要只看摘要。

二、验证构建产物一致性 #

本地构建后把dist文件夹上传到临时存储测试，确认和Amplify构建的产物是否一致：

• 本地执行npm run build，生成dist文件夹
• 对比本地dist和Amplify构建后存储在S3的amplify-hosting/xxx/dist文件差异，重点检查：
  • index.html中的资源路径是否正确
  • 环境变量注入是否缺失
  • 打包后的JS/CSS文件是否有损坏

三、排查API变量相关文件问题 #

针对你怀疑的API变量文件，逐一验证：

1. /src/types/custom.d.ts类型定义 #

• 确认类型定义没有语法错误，比如是否遗漏分号、括号不匹配，Amplify的Node环境可能对TS语法更严格
• 检查是否有未导出的类型导致打包时静默报错

2. /src/services/axiosInstance.ts配置 #

• 确认API baseURL是否正确引用Amplify环境变量，比如import.meta.env.VITE_API_URL
• 检查是否有生产环境下未定义的变量，本地可能有.env.local但Amplify没配置对应变量
• 测试去掉axios实例中的拦截器或复杂逻辑，简化后重新部署看是否成功

3. vite.config.js配置 #

• 确认build配置中的outDir为dist，和Amplify部署阶段的路径匹配：

  export default defineConfig({
    build: {
      outDir: 'dist'
    }
  })
  

• 检查resolve.alias等配置是否正确，Amplify环境下能否解析路径

四、检查amplify.yml配置细节 #

对比主分支和当前分支的amplify.yml差异，重点看：

• 构建阶段命令是否一致，比如是否误将npm run build写成npm run dev
• 部署阶段是否指定了正确的产物路径：

  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  

• Amplify控制台的环境变量中是否添加了当前分支需要的API相关变量

五、依赖版本与缓存问题 #

• 强制Amplify重新安装依赖，避免缓存导致版本不一致，在amplify.yml构建阶段添加：

  build:
    commands:
      - rm -rf node_modules package-lock.json
      - npm install
      - npm run build
  

• 在amplify.yml中指定和本地一致的Node版本：

  frontend:
    phases:
      preBuild:
        commands:
          - nvm install 18
          - nvm use 18
  

六、分支差异对比 #

用Git对比当前分支和主分支的所有修改，重点关注：

• 是否新增了未在Amplify中配置的第三方依赖
• 是否修改了路由配置，比如新增路由是否需要Amplify配置SPA重定向规则（/*重定向到index.html）
• 是否有文件未被Git正确追踪

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