使用Vite集成Google翻译API时require与import兼容问题

问题根源 #

Google Cloud翻译客户端库是为Node.js环境开发的，依赖Node内置的process变量，而Vite构建的前端环境默认不提供这个变量，直接用import语法就会触发报错。

具体解决方案 #

1. 给Vite注入process变量
   在项目根目录的vite.config.js（或.ts）里添加define配置，手动补充process.env相关变量：

import { defineConfig } from 'vite'

export default defineConfig({
  define: {
    'process.env': {}
  }
})

如果需要用到具体环境变量（注意：绝对不能把Google API密钥直接写在前端代码里！），可以单独指定：

define: {
  'process.env.GOOGLE_TRANSLATE_API_KEY': JSON.stringify(process.env.GOOGLE_TRANSLATE_API_KEY)
}

2. 改用ES模块的import语法
   替换官方示例的require语法：

import { TranslationServiceClient } from '@google-cloud/translate'

3. 重要安全提醒
   Google翻译API密钥如果暴露在前端，很容易被恶意盗用，导致你的账号产生不必要的费用。正确做法是：

• 在Node.js后端封装翻译接口，由后端调用Google客户端库处理请求
• 前端通过axios/fetch调用自己的后端接口，传递待翻译文本即可

额外排查点 #

如果问题依旧，检查以下内容：

• 确认已安装依赖：npm install @google-cloud/translate
• 若使用TypeScript，安装类型声明：npm install @types/google-cloud-translate --save-dev

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