React Native中如何让.env文件解析PowerShell环境变量$env:IPADDR？

.env 文件本身不支持解析 PowerShell 的环境变量语法（$env:IPADDR）。$npm_package_name 能生效是因为它是 npm/yarn 在运行脚本时自动注入的内置变量，dotenv 加载器默认会识别并替换这类以 npm_package_ 开头的变量；而 $env:IPADDR 是 PowerShell 层面的 shell 变量，dotenv 不会主动解析 PowerShell 的语法格式，所以会被直接当成字面量输出。

下面提供三种可行的解决方法，根据你的需求选择：

方法1：启动脚本中直接注入环境变量 #

不需要修改 .env，直接在启动项目的 PowerShell 命令里生成并设置 REACT_APP_API_URL 环境变量，dotenv 会自动读取这个已存在的环境变量。

修改 package.json 的 start 脚本：

"scripts": {
  "start": "$env:IPADDR=(Get-NetIPAddress -AddressFamily IPv4 | Where-Object {$_.InterfaceAlias -notmatch 'Loopback'}).IPAddress[0]; $env:REACT_APP_API_URL=\"http://$env:IPADDR:3000/\"; react-native start"
}

启动项目时，PowerShell 会先获取本地 IP，设置好 REACT_APP_API_URL，再启动 React Native，此时项目里就能直接通过 process.env.REACT_APP_API_URL 拿到正确的地址。

方法2：用 PowerShell 脚本动态生成 .env 文件 #

写一个专门的脚本生成 .env 文件，把 IP 地址替换进去，再启动项目。

1. 在项目根目录创建 setup-env.ps1 脚本：

# 获取本地IPv4地址（排除回环接口）
$ipaddr = (Get-NetIPAddress -AddressFamily IPv4 | Where-Object {$_.InterfaceAlias -notmatch 'Loopback'}).IPAddress[0]

# 构造.env内容，可添加其他变量
$envContent = @"
REACT_APP_API_URL=http://$ipaddr:3000/
# 其他环境变量
REACT_APP_DEBUG=true
"@

# 写入.env文件
Set-Content -Path .env -Value $envContent

2. 修改 package.json 的启动脚本，先运行生成脚本再启动项目：

"scripts": {
  "start": ".\\setup-env.ps1; react-native start"
}

每次启动项目时，都会自动生成包含正确 IP 的 .env 文件。

方法3：使用 dotenv-expand 插件解析环境变量 #

借助 dotenv-expand 插件，让 dotenv 支持解析环境变量的引用。

1. 安装插件：

npm install dotenv-expand --save-dev

2. 在项目入口文件（比如 index.js）中，先加载并扩展 dotenv 配置：

const dotenv = require('dotenv');
const dotenvExpand = require('dotenv-expand');

const configResult = dotenv.config();
dotenvExpand.expand(configResult);

3. 修改 .env 文件，用 ${变量名} 的格式引用环境变量：

REACT_APP_API_URL=http://${IPADDR}:3000/

4. 确保启动项目时 IPADDR 环境变量已存在，修改 package.json 的启动脚本：

"scripts": {
  "start": "$env:IPADDR=(Get-NetIPAddress -AddressFamily IPv4 | Where-Object {$_.InterfaceAlias -notmatch 'Loopback'}).IPAddress[0]; react-native start"
}

这样启动时，dotenv-expand 会把 ${IPADDR} 替换为 PowerShell 中设置的 IP 地址。

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