React应用能否读取系统环境变量而非.env文件？

首先明确核心前提：React是运行在浏览器端的前端框架，无法直接访问系统环境变量，必须通过构建工具在项目启动/构建阶段，将系统环境变量注入到应用代码中，才能在前端代码里使用。以下是不同构建工具下的具体实现方式：

1. Create React App (CRA) 项目 #

CRA默认支持注入系统环境变量，但要求变量名必须以REACT_APP_为前缀。

开发环境启动 #

直接在启动命令前追加系统变量：

# Linux/Mac
REACT_APP_API_URL=$API_URL npm start

# Windows PowerShell
$env:REACT_APP_API_URL = $env:API_URL; npm start

# Windows CMD
set REACT_APP_API_URL=%API_URL% && npm start

之后在代码中直接通过process.env.REACT_APP_API_URL访问变量。

生产构建 #

同样在构建命令前传递系统变量：

# Linux/Mac
REACT_APP_API_URL=$API_URL npm run build

# Windows PowerShell
$env:REACT_APP_API_URL = $env:API_URL; npm run build

简化命令（可选） #

可以在package.json的scripts中预先配置，避免每次手动输入：

// Linux/Mac 配置
"scripts": {
  "start": "REACT_APP_API_URL=$API_URL react-scripts start",
  "build": "REACT_APP_API_URL=$API_URL react-scripts build"
}

// Windows CMD 配置
"scripts": {
  "start": "set REACT_APP_API_URL=%API_URL% && react-scripts start",
  "build": "set REACT_APP_API_URL=%API_URL% && react-scripts build"
}

2. Vite 项目 #

Vite对环境变量的前缀要求是VITE_，构建时会自动识别并注入符合规则的系统变量。

启动/构建时传递变量 #

# Linux/Mac
VITE_API_URL=$API_URL npm run dev
VITE_API_URL=$API_URL npm run build

# Windows PowerShell
$env:VITE_API_URL = $env:API_URL; npm run dev

代码中访问 #

直接通过import.meta.env.VITE_API_URL读取变量。

简化命令（可选） #

在package.json中配置脚本：

// Linux/Mac
"scripts": {
  "dev": "VITE_API_URL=$API_URL vite",
  "build": "VITE_API_URL=$API_URL vite build"
}

3. 自定义Webpack配置的项目 #

如果是自行配置Webpack的React项目，需要使用DefinePlugin手动注入系统变量：

在webpack.config.js中添加配置：

const webpack = require('webpack');

module.exports = {
  // 其他Webpack配置
  plugins: [
    new webpack.DefinePlugin({
      // 将系统环境变量API_URL注入到前端代码的process.env中
      'process.env.REACT_APP_API_URL': JSON.stringify(process.env.API_URL)
    })
  ]
};

之后启动或构建时传递系统变量：

API_URL=$API_URL npm run build

前端代码中通过process.env.REACT_APP_API_URL访问。

关键注意事项 #

• 所有注入的系统变量都会被打包进前端静态文件，生产环境构建时务必确保变量值正确。
• 不同构建工具的变量前缀要求必须遵守，否则变量不会被注入到前端代码中。
• 不要在前端代码中存储敏感信息（如密钥），即使通过系统变量注入，也会暴露在浏览器的开发者工具中。

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