Vite+React项目无法读取.env环境变量的问题排查与解决

问题重现 #

用Vite搭建React项目，集成@react-oauth/google时配置Google OAuth clientId遇到多轮问题：

• 初始用clientId={process.env.MY_CLIENT_ID}，浏览器报错process is not defined
• 查Vite文档后改用import.meta.env.MY_CLIENT_ID，应用能正常渲染，但触发@react-oauth/google的错误：

  m=credential_button_library:45 [GSI_LOGGER]: The given client ID is not found.
  

  此时console.log(import.meta.env.MY_CLIENT_ID)输出undefined
• 将环境变量名改为VITE_MY_CLIENT_ID后，问题依旧
• 参考建议修改Vite配置，手动注入process.env：

  import { defineConfig, loadEnv } from 'vite';
  
  export default defineConfig(({ command, mode }) => {
      const env = loadEnv(mode, process.cwd(), '');
      return {
          define: {
              'process.env.VITE_MY_CLIENT_ID': JSON.stringify(env.VITE_MY_CLIENT_ID),
          },
      };
  });
  

  修改后process.env不再报错，但console.log(process.env.VITE_MY_CLIENT_ID)仍输出undefined

最终解决办法 #

问题本质是**.env文件放置位置错误**，需将.env文件放在项目根目录（与vite.config.js、package.json同级目录），而非src或其他子目录下。

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