部署VueJS至AWS S3+CloudFront遇ERR_CONNECTION_TIMED_OUT问题

核心问题定位 #

从错误信息看，刷新后请求的是https://seeding.gg/assets/index.b6d75f23.js而非CloudFront域名，说明打包后的资源引用路径错误，同时CloudFront与S3的OAC配置可能存在访问权限问题，导致资源无法加载。

分步排查方案 #

1. 修正资源引用路径（优先级最高） #

你的vite.config.js中base配置为CloudFront域名，但实际请求指向了seeding.gg，按以下步骤检查：

• 查看打包后的dist/index.html，确认所有资源（如assets/xxx.js）的前缀是否为CloudFront域名。如果是seeding.gg，说明base配置未生效。
• 确认build时的环境变量：执行npm run build前，是否设置了VITE_APP_ENV=prod？因为你的代码默认用dev环境配置，若.env.dev中存在覆盖资源路径的变量（如VITE_APP_BASE_URL=https://seeding.gg/），会导致打包路径错误。
• 移除vite.config.js中build.rollupOptions.input的src/main.js，Vite默认会以index.html为入口，多入口配置可能导致资源路径异常。修改后的build配置：

build: {
  outDir: 'dist'
}

2. 验证CloudFront与S3的OAC配置 #

连接超时也可能是CloudFront无法访问S3资源，检查以下配置：

• S3桶策略：确保桶策略允许CloudFront OAC访问所有对象，示例策略（替换占位符）：

{
  "Version": "2008-10-17",
  "Id": "PolicyForCloudFrontPrivateContent",
  "Statement": [
    {
      "Sid": "1",
      "Effect": "Allow",
      "Principal": {
        "Service": "cloudfront.amazonaws.com"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*",
      "Condition": {
        "StringEquals": {
          "AWS:SourceArn": "arn:aws:cloudfront::YOUR_ACCOUNT_ID:distribution/YOUR_DISTRO_ID"
        }
      }
    }
  ]
}

• CloudFront源配置：源域名必须是S3的REST API端点（格式：bucket-name.s3.region.amazonaws.com），不能用静态网站托管域名；源访问控制需选择你创建的OAC。
• CloudFront部署状态：在AWS控制台查看分发状态，必须为Deployed才会生效，新配置通常需要5-10分钟部署。

3. 排查网络与DNS问题 #

• 执行nslookup YOUR_CLOUDFRONT_DOMAIN（去掉https://和末尾的/），确认能解析到CloudFront的全球IP地址。
• 尝试切换网络（如手机热点）访问，排除本地防火墙、VPN或代理的拦截。
• 确认CloudFront分发的价格类包含你所在的区域，避免区域限制导致连接失败。

4. 单页应用路由补充检查（若使用Vue Router） #

如果你的网站使用Vue Router的history模式，需在CloudFront配置自定义错误响应：将404和403状态码重定向到/index.html，避免刷新非根路径时出现错误（虽然当前是超时，但这是单页应用部署的常见配置）。

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