使用Vite时如何配置process.env以支持@MUI访问环境变量？

核心原因 #

Vite不会像Webpack那样默认在浏览器环境注入process对象，第三方库直接访问process.env时就会出现属性读取失败的问题。

具体解决方案 #

方案1：通过Vite的define配置直接注入变量 #

在vite.config.ts里添加define配置，手动注入MUI需要的环境变量：

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

export default defineConfig({
  plugins: [react()],
  define: {
    // 注意必须用JSON.stringify包裹，避免被当作变量名解析
    'process.env.GRID_EXPERIMENTAL_ENABLED': JSON.stringify('false'), // 根据需求设为'true'或'false'
    // 若需注入多个变量，可批量配置
    // 'process.env': JSON.stringify({
    //   GRID_EXPERIMENTAL_ENABLED: 'false',
    //   // 其他环境变量...
    // })
  }
});

方案2：结合dotenv加载.env文件中的变量 #

如果变量存在项目根目录的.env文件中，可通过dotenv加载后注入：

1. 安装dotenv依赖：

npm install dotenv --save-dev

2. 修改vite.config.ts：

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

dotenv.config(); // 加载.env文件中的变量

export default defineConfig({
  plugins: [react()],
  define: {
    'process.env.GRID_EXPERIMENTAL_ENABLED': JSON.stringify(process.env.GRID_EXPERIMENTAL_ENABLED || 'false')
  }
});

3. 在项目根目录创建.env文件：

GRID_EXPERIMENTAL_ENABLED=false

方案3：全局挂载process对象（不推荐） #

若需要让所有第三方库都能访问完整的process.env，可在项目入口文件（如src/main.tsx）中手动挂载：

// 先挂载process对象，再导入其他代码
window.process = {
  env: {
    GRID_EXPERIMENTAL_ENABLED: import.meta.env.VITE_GRID_EXPERIMENTAL_ENABLED || 'false'
    // 其他需要的变量...
  }
};

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

此方法会在全局添加process对象，可能与其他代码产生冲突，谨慎使用。

验证方式 #

修改配置后重启Vite服务，在组件中打印process.env.GRID_EXPERIMENTAL_ENABLED确认值正确，同时检查MUI库的代码是否能正常运行。

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