如何在ViteJS React项目中配置使用Node.js的process.env

Vite默认推荐在客户端代码中使用import.meta.env，但要实现Node.js风格的process.env，可以通过以下步骤配置：

1. 安装必要插件 #

首先安装vite-plugin-env-compatible，它能把Vite的环境变量映射到process.env上：

npm install vite-plugin-env-compatible --save-dev
# 或使用yarn
yarn add vite-plugin-env-compatible -D

2. 配置vite.config.ts #

修改你的vite.config.ts，引入并启用该插件，同时可结合Vite自带的环境变量加载逻辑：

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

export default defineConfig({
  plugins: [
    react(),
    envCompatible({
      // 控制注入process.env的变量前缀，默认是VITE_
      prefix: 'VITE_',
      // 是否自动加载.env/.env.local等环境文件，默认开启
      loadEnvFiles: true,
    })
  ],
  // 注：vite.config.ts本身运行在Node环境中，你原有代码里的process.env可以直接保留，无需额外配置
})

3. 配置TypeScript类型提示（可选） #

为让TypeScript识别process.env的类型，在src/vite-env.d.ts中添加：

interface ProcessEnv {
  [key: string]: string | undefined;
  // 可添加你实际用到的环境变量，比如：
  DFX_NETWORK: string;
  NODE_ENV: 'development' | 'production' | 'test';
}

declare let process: {
  env: ProcessEnv;
};

4. 注意事项 #

• 客户端代码中可访问的环境变量仍需以VITE_为前缀（除非修改插件prefix配置），这是Vite的安全机制，防止敏感变量意外泄露。
• 仅客户端代码需要通过插件映射process.env，Vite配置文件本身运行在Node环境，原生支持process.env。

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