如何解决Vue3集成Cognito时出现的global is not defined错误？

问题根源 #

Vue3+Vite环境默认不注入Node.js全局变量（如global、Buffer），而amazon-cognito-identity-js依赖这些变量，导致报错。

方案1：Vite配置注入全局变量（推荐） #

步骤1：安装依赖 #

npm install buffer

步骤2：修改Vite配置文件（vite.config.ts） #

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  // 定义global指向window
  define: {
    'global': 'window'
  },
  // 配置buffer别名
  resolve: {
    alias: {
      buffer: 'buffer'
    }
  }
})

步骤3：在main.ts顶部补充Buffer全局定义 #

import { Buffer } from 'buffer'
window.Buffer = Buffer

// 之后再初始化Amplify
import { Amplify } from 'aws-amplify'
import awsconfig from './aws-exports'
Amplify.configure(awsconfig)

// 然后创建Vue应用
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

方案2：使用ESBuild全局变量补全插件 #

如果方案1无效，试试专门的polyfill插件：

步骤1：安装插件 #

npm install @esbuild-plugins/node-globals-polyfill --save-dev

步骤2：修改Vite配置 #

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        NodeGlobalsPolyfillPlugin({
          global: true,
          buffer: true
        })
      ]
    }
  }
})

方案3：换用AWS SDK v3（更轻量化） #

放弃aws-amplify，直接用AWS SDK v3调用Cognito API，适配现代前端环境，无需处理老旧全局变量问题：

步骤1：安装依赖 #

npm install @aws-sdk/client-cognito-identity-provider

步骤2：自定义登录组件示例 #

<template>
  <div>
    <input v-model="username" placeholder="用户名">
    <input v-model="password" type="password" placeholder="密码">
    <button @click="handleLogin">登录</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CognitoIdentityProviderClient, InitiateAuthCommand } from "@aws-sdk/client-cognito-identity-provider";

const username = ref('')
const password = ref('')

// 初始化Cognito客户端
const cognitoClient = new CognitoIdentityProviderClient({
  region: '你的AWS区域（如us-east-1）',
})

const handleLogin = async () => {
  try {
    const command = new InitiateAuthCommand({
      AuthFlow: 'USER_PASSWORD_AUTH', // 根据你的用户池配置选择认证流
      ClientId: '你的用户池客户端ID',
      AuthParameters: {
        USERNAME: username.value,
        PASSWORD: password.value
      }
    })

    const response = await cognitoClient.send(command)
    // 处理返回的Token，比如存入本地存储或状态管理
    console.log('登录成功', response.AuthenticationResult)
  } catch (err) {
    console.error('登录失败', err)
  }
}
</script>

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