已遵循Vite-React中.env规则仍提示process未定义

Vite 与 Create React App 的环境变量机制不同，Vite 不支持 process.env，而是使用 import.meta.env 来读取环境变量，这是你出现错误的核心原因。以下是两种解决方式：

方式一：改用Vite默认的环境变量前缀 #

1. 修改根目录下的 .env 文件，将变量前缀从 REACT_APP_ 替换为 VITE_：

VITE_SANITY_PROJECT_ID=你的项目ID
VITE_SANITY_TOKEN=你的项目令牌

2. 修改 src/client.js 中的变量调用代码，替换 process.env 为 import.meta.env，同时修正urlFor函数的语法错误：

import sanityClient from "@sanity/client";
import imageUrlBuilder from "@sanity/image-url";

export const client = sanityClient({
  projectId: import.meta.env.VITE_SANITY_PROJECT_ID,
  dataset: "production",
  apiVersion: "2023-01-01",
  useCdn: true,
  token: import.meta.env.VITE_SANITY_TOKEN,
});

const builder = imageUrlBuilder(client);
export const urlFor = (source) => builder.image(source);

方式二：保留REACT_APP_前缀，配置Vite支持 #

如果不想修改变量前缀，可以在项目根目录的 vite.config.js 中添加 envPrefix 配置：

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

export default defineConfig({
  plugins: [react()],
  envPrefix: 'REACT_APP_' // 允许使用REACT_APP_开头的环境变量
})

此时代码中需将 process.env 替换为 import.meta.env，示例：

projectId: import.meta.env.REACT_APP_SANITY_PROJECT_ID,
token: import.meta.env.REACT_APP_SANITY_TOKEN,

注意事项 #

• 确保 .env 文件位于项目根目录，文件名正确（如 .env、.env.development）
• 修改 .env 文件后必须重启Vite开发服务器，否则新变量不会生效
• 生产打包时，Vite会自动替换 import.meta.env 相关变量，无需额外配置

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