Expo React Native Web 多环境 API 地址切换实战指南-js教程-PHP中文网

Expo React Native Web 多环境 API 地址切换实战指南

本文详解如何在 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-best-practices

重要：对 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`