React Vite部署AWS S3后遇AWS-sdk构造函数类型错误

1. 修正AWS SDK v2的按需导入方式 #

如果你用的是AWS SDK v2，直接从aws-sdk根目录导入单个模块会出问题——Vite生产构建时的tree shaking可能把构造函数的正确导出给破坏了。得换个导入姿势：

// 只导入核心模块和需要的具体类
import AWS from 'aws-sdk/lib/core'
import CognitoIdentityCredentials from 'aws-sdk/lib/cognito-identity-credentials'
import S3 from 'aws-sdk/lib/s3'

// 手动挂载到AWS核心对象上
AWS.CognitoIdentityCredentials = CognitoIdentityCredentials
AWS.S3 = S3

// 正常使用
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
  // 你的身份池配置参数
})
const s3 = new AWS.S3({ region: '你的区域' })

这种方式只会打包你用到的子模块，既解决体积过大的问题，又能保证构造函数被正确识别。

2. 让Vite跳过AWS SDK的预构建 #

Vite的依赖预构建有时候会对aws-sdk这类复杂模块处理异常，导致生产环境导出异常。在vite.config.js里添加配置：

export default {
  optimizeDeps: {
    exclude: ['aws-sdk']
  }
}

这样Vite就不会对aws-sdk做预构建，直接按原始模块结构处理，避免导出错误。

3. 换成AWS SDK v3（长期最优解） #

AWS SDK v3本身就是模块化设计，完全不需要担心按需导入的问题，打包体积更小，还能彻底解决这类构造函数错误。比如替换成v3的代码：

// 只安装你用到的包，比如@aws-sdk/client-s3、@aws-sdk/credential-provider-cognito-identity
import { CognitoIdentityClient } from "@aws-sdk/client-cognito-identity";
import { fromCognitoIdentityPool } from "@aws-sdk/credential-provider-cognito-identity";
import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";

// 初始化凭证
const cognitoClient = new CognitoIdentityClient({ region: '你的区域' });
const credentials = fromCognitoIdentityPool({
  client: cognitoClient,
  identityPoolId: '你的身份池ID'
});

// 初始化S3客户端
const s3Client = new S3Client({
  region: '你的区域',
  credentials
});

// 调用示例
await s3Client.send(new PutObjectCommand({
  Bucket: '你的桶名',
  Key: '文件路径',
  Body: 文件内容
}));

用v3之后，不仅体积问题解决了，这类构造函数的错误也不会再出现。

4. 检查S3的缓存和部署配置 #

有时候不是代码的问题，是浏览器缓存了旧的打包文件，或者S3的静态网站配置有问题：

• 部署时确保Vite生成的带hash后缀的文件被正确上传，给带hash的文件设置缓存策略Cache-Control: public, max-age=31536000, immutable，给index.html设置Cache-Control: no-cache，避免浏览器缓存旧的入口文件。
• 部署后强制刷新浏览器（Ctrl+Shift+R），排除缓存导致的旧代码问题。
• 确认S3静态网站托管的索引文档是index.html，错误文档也设置为index.html（单页应用需要）。

5. 本地先测生产构建 #

别直接往S3上传，本地先跑npm run build，然后用serve dist（先安装serve：npm install -g serve）启动生产环境的服务测试。如果本地生产环境也报错，那就是构建配置的问题；如果本地正常，S3上出错，那就是缓存或者S3配置的问题，这样排查更快。

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