本文详解如何在 expo + react native web 项目中安全、可靠地实现开发与生产环境的 api 地址自动切换，涵盖 .env 文件配置、babel 插件正确用法、构建命令优化及常见失效原因排查。
本文详解如何在 expo + react native web 项目中安全、可靠地实现开发与生产环境的 api 地址自动切换，涵盖 .env 文件配置、babel 插件正确用法、构建命令优化及常见失效原因排查。
在 Expo React Native Web 项目中，将本地 http://127.0.0.1 API 切换为生产环境（如 https://dierenwelzijndocker.azurewebsites.net）不能仅依赖 NODE_ENV 环境变量或手动修改 .env 文件——因为 react-native-dotenv 在 Web 构建阶段（尤其是 expo export:web）并不会动态读取运行时环境，而是在 Babel 编译期静态注入 环境变量。若配置不当，所有构建产物（包括 web-build/）将始终固化为 .env 中定义的值，导致生产包仍调用 localhost。
✅ 正确方案：按环境指定 .env 文件路径 + 显式声明 envName，并统一使用 expo export:web --config 或 --env 参数驱动
1. 规范化环境文件命名与内容
删除冗余的 env.prod，严格采用 react-native-dotenv 官方推荐结构：
# .env.development（开发环境） API_URL=http://127.0.0.1:3000 # .env.production（生产环境） API_URL=https://dierenwelzijndocker.azurewebsites.net
⚠️ 注意：
- 文件名必须为
.env.[mode]格式（development/production），react-native-dotenv会自动匹配；- 不要使用
REACT_APP_ENV=PRODUCTION等自定义变量——react-native-dotenv*不识别 `REACTAPP前缀**，只认API_URL` 这类裸变量；GENERATE_SOURCEMAP=false是 Create React App 配置，对 Expo Web 无效，应移除。
2. 修正 babel.config.js 配置
关键点：path 必须动态指向对应环境文件，且 envName 应设为 process.env.NODE_ENV：
重要：对 React 或 Next.js 代码的任何更改必须先阅读本技能。Vercel 工程团队的 React 与 Next.js 指南，涵盖可视化...
// babel.config.js
module.exports = function (api) {
api.cache(true);
const env = process.env.NODE_ENV || 'development';
return {
presets: ['babel-preset-expo'],
plugins: [
'babel-plugin-styled-components-react-native-web',
[
'module:react-native-dotenv',
{
moduleName: '@env',
// ✅ 动态路径：根据 NODE_ENV 自动加载 .env.development 或 .env.production
path: `.env.${env}`,
// ✅ envName 必须设为 process.env.NODE_ENV，否则插件无法感知当前模式
envName: env,
allowUndefined: false,
verbose: true, // 开发期开启，确认是否加载了正确文件
},
],
],
};
};3. 重构 package.json 脚本（核心！）
expo export:web 不支持 --env production 这类参数，但支持 --config 指定 app config（如 app.production.json），更推荐直接通过 NODE_ENV 控制：
{
"scripts": {
"start:dev": "NODE_ENV=development expo start",
"start:prod": "NODE_ENV=production expo start",
"build:web:dev": "NODE_ENV=development expo export:web --output-dir web-build-dev",
"build:web:prod": "NODE_ENV=production expo export:web --output-dir web-build-prod"
}
}执行生产构建：
npm run build:web:prod
此时 Babel 会读取 .env.production，API_URL 将被静态替换为 https://dierenwelzijndocker.azurewebsites.net。
4. 验证与调试技巧
- ✅ 检查构建产物：打开
web-build-prod/index.html→ 查看<script></script>中是否包含API_URL:"https://..."字符串； - ✅ 启用
verbose: true后，启动时控制台会输出：Loaded environment from .env.production； - ❌ 错误实践：
npx expo export:web .env.production—— 此命令将.env.production当作输出目录，完全无效； - ? 替代方案（高级）：若需运行时切换（如 CDN 部署后动态配置），应改用
expo-constants+app.config.js动态注入，而非react-native-dotenv。
总结：避坑三原则
| 问题类型 | 错误做法 | 正确做法 |
|---|---|---|
| 环境文件 | 使用 env.prod 或 REACT_APP_* 前缀 |
严格命名 .env.development / .env.production，无前缀 |
| Babel 配置 | 固定 path: ".env"
|
动态 path: .env.${process.env.NODE_ENV} + envName: process.env.NODE_ENV
|
| 构建命令 | expo export:web xxx.env |
NODE_ENV=production expo export:web |
完成上述配置后，web-build-prod/ 中所有 JS 文件内的 API_URL 将 100% 替换为生产地址，彻底解决“构建后仍连 localhost”的顽疾。
