AWS Amplify部署成功后访问显示白屏问题求助

1. 修复SPA路由重定向配置 #

• 若使用React/Vue/Angular等单页框架，必须配置Amplify的重定向规则：
  • 方式一：在项目根目录的amplify.yml中添加重定向规则：

    frontend:
      phases:
        preBuild:
          commands:
            - npm install
        build:
          commands:
            - npm run build
      artifacts:
        baseDirectory: build # 对应你的项目构建输出目录
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*
      rewriteRules:
        - source: /<*>/index.html
          target: /index.html
          status: 200
    

  • 方式二：登录Amplify控制台，进入项目的Rewrites and Redirects，添加规则：源地址填</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>，目标地址填/index.html，类型选200 (Rewrite)。

2. 排查浏览器控制台错误 #

• 按F12打开浏览器开发者工具，检查两个核心标签：
  • Console：查看JS执行错误（如资源加载失败、未捕获的异常），这类错误会直接阻断页面渲染。
  • Network：检查静态资源（JS/CSS/图片）的请求状态，若出现403/404，说明资源路径配置错误或权限问题。

3. 核对构建输出目录 #

• 登录Amplify控制台，进入Build Settings，确认baseDirectory的路径与项目实际构建输出一致：
  • React项目默认是build，Vue项目是dist，Angular项目是dist/你的项目名称。路径错误会导致Amplify无法找到页面入口文件。

4. 同步环境变量配置 #

• 本地运行时使用的环境变量（如后端API地址、密钥）需在Amplify控制台的Environment variables中同步配置，缺失变量会导致前端请求失败、页面逻辑崩溃。

5. 检查构建日志与本地打包产物 #

• 查看Amplify控制台的Build logs，若构建过程存在警告或错误（如依赖安装失败、打包语法错误），即使显示部署成功，也会导致产物不完整。
• 本地执行npm run build后，直接打开构建输出目录下的index.html，若本地也白屏，说明是项目打包本身的问题，需先修复本地构建逻辑。

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