如何在React客户端按环境用dotenv修改Socket域名的process.env变量？

嘿，我之前刚好在CRAA项目里处理过类似的多环境配置需求，给你一步步拆解怎么弄：

1. 先明确CRAA的默认环境文件规则 #

Create React App默认支持以下几个环境文件：

• .env.development：开发环境启动（npm start）时自动加载
• .env.production：生产构建（npm run build）时自动加载
• .env.test：运行测试（npm test）时自动加载

但你说的**预发布（staging）**不属于默认环境，所以我们需要自定义这个环境的配置文件和启动/构建命令。

2. 创建预发布环境的配置文件 #

在项目根目录新建.env.staging文件，写入你的Socket域名配置：

REACT_APP_SOCKET_DOMAIN=ws://your-staging-socket-domain.com

⚠️ 注意：所有需要在CRAA中暴露的环境变量必须以REACT_APP_开头，否则会被框架忽略。

3. 安装依赖支持自定义环境 #

CRAA本身不支持直接指定自定义环境文件，所以我们需要用env-cmd工具来加载指定的.env文件。执行安装命令：

# npm
npm install env-cmd --save-dev

# yarn
yarn add env-cmd --dev

4. 修改package.json的脚本命令 #

在scripts字段里添加预发布环境的启动和构建命令：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  // 预发布环境构建
  "build:staging": "env-cmd -f .env.staging react-scripts build",
  // 预发布环境开发模式启动（本地模拟预发布环境用）
  "start:staging": "env-cmd -f .env.staging react-scripts start",
  "test": "react-scripts test"
}

5. 验证配置是否生效 #

在代码里加一行日志测试：

console.log('当前Socket域名:', process.env.REACT_APP_SOCKET_DOMAIN);

然后运行对应命令：

• 启动预发布开发环境：npm run start:staging
• 构建预发布生产包：npm run build:staging

打开控制台就能看到对应的预发布Socket域名了。

关于.env.test的说明 #

如果你坚持想用.env.test，它默认是给单元测试环境用的——运行npm test时CRAA会自动加载这个文件的变量。但预发布和测试环境用途不同，建议还是用.env.staging区分，避免混淆配置逻辑。

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