如何为Expo开发的React Native Web切换生产环境API地址？

1. 确认基础配置正确性 #

先核对你的环境文件和Babel配置：

• .env文件：API_URL=http://localhost:3000
• .env.prod文件：API_URL=https://your-production-api.com
• babel.config.js需正确引入react-native-dotenv插件：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ['module:react-native-dotenv', {
        moduleName: '@env',
        path: '.env',
        allowUndefined: true
      }]
    ]
  };
};

2. 打包时指定生产环境配置 #

react-native-dotenv默认加载.env，打包生产版本时需要通过环境变量指定加载.env.prod，有两种方式：

方式一：直接在命令行执行 #

根据操作系统不同，执行对应命令：

# macOS/Linux
ENVFILE=.env.prod npx expo export:web

# Windows（PowerShell）
$env:ENVFILE=".env.prod"; npx expo export:web

方式二：在package.json中添加打包脚本 #

在package.json的scripts字段里新增生产打包命令，后续直接调用脚本即可：

{
  "scripts": {
    "build:web:prod": "ENVFILE=.env.prod npx expo export:web",
    "build:web:dev": "npx expo export:web"
  }
}

之后执行npm run build:web:prod就能加载生产环境的API配置。

3. 验证配置是否生效 #

可以在代码里加一行日志，确认打包后的API地址：

import { API_URL } from '@env';

console.log('当前API地址:', API_URL);

打包完成后，打开web-build目录下的index.html，查看控制台输出是否为生产环境的URL。

4. 额外注意点 #

• 确保.env.prod文件存在于项目根目录，且未被.gitignore误屏蔽（如果需要版本控制的话）。
• 若使用Expo SDK 49及以上版本，也可以切换到Expo官方的expo-constants管理环境变量，只需给变量加上EXPO_PUBLIC_前缀，打包时同样通过ENVFILE指定配置文件，适配性更强。

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