React+Vite项目中ReferenceError: Can't find variable: process问题求助

核心原因 #

Vite 不支持 process.env（这是 Create React App 的环境变量访问方式），而是使用 import.meta.env 作为客户端环境变量的入口，同时要求暴露给客户端的环境变量必须以 VITE_ 为前缀。

具体修复步骤 #

1. 修正 .env.local 文件的变量前缀 #

将所有变量的 REACT_PUBLIC_ 前缀替换为 VITE_，修改后的 .env.local 内容如下：

VITE_API_KEY=AIzaSypgnwErnpfynpyGFPHFfnnfdr8zQjQjlI-pl_THN84
VITE_AUTH_DOMAIN=spt-tpghgp.firebaseapp.com
VITE_PROJECT_ID=spt-tpghgp
VITE_STORAGE_BUCKET=spt-tpghgp.appspot.com
VITE_MESSAGING_SENDER_ID=1093848932398
VITE_APP_ID=1:1062445498:web:e664555336e96f249f

2. 更新 Firebase 配置文件的变量引用 #

将 process.env 替换为 import.meta.env，并对应修改变量名：

export const firebaseConfig = {
  apiKey: import.meta.env.VITE_API_KEY,
  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_APP_ID
};

3. 重启 Vite 开发服务器 #

环境变量文件修改后，必须重启开发服务器才能生效，停止当前的 npm run dev 命令，重新启动即可。

可选：兼容 process.env（不推荐） #

如果需要临时兼容 process.env 写法，可以在 vite.config.js/ts 中添加 define 配置，但不建议长期使用，最好遵循 Vite 原生规范：

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

export default defineConfig({
  plugins: [react()],
  define: {
    'process.env': {
      REACT_APP_PUBLIC_API_KEY: JSON.stringify(import.meta.env.VITE_API_KEY),
      REACT_APP_PUBLIC_AUTH_DOMAIN: JSON.stringify(import.meta.env.VITE_AUTH_DOMAIN),
      REACT_APP_PUBLIC_PROJECT_ID: JSON.stringify(import.meta.env.VITE_PROJECT_ID),
      REACT_APP_PUBLIC_STORAGE_BUCKET: JSON.stringify(import.meta.env.VITE_STORAGE_BUCKET),
      REACT_APP_PUBLIC_MESSAGING_SENDER_ID: JSON.stringify(import.meta.env.VITE_MESSAGING_SENDER_ID),
      REACT_APP_PUBLIC_APP_ID: JSON.stringify(import.meta.env.VITE_APP_ID)
    }
  }
})

验证配置 #

可以在组件中添加日志验证变量是否正确加载：

console.log('API Key:', import.meta.env.VITE_API_KEY)

启动项目后查看控制台，确认变量能正常输出即可。

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