如何在Expo React Native Web中用react-native-dotenv加载生产环境变量

1. 修改Babel配置文件（babel.config.js） #

调整react-native-dotenv插件的路径配置，让它根据NODE_ENV自动加载对应环境的.env文件：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ['module:react-native-dotenv', {
        moduleName: '@env', // 保持和你开发环境一致的模块名
        path: process.env.NODE_ENV === 'production' ? '.env.production' : '.env',
        allowUndefined: false, // 可选：禁止未定义变量，避免生产环境出错
        safe: false
      }]
    ]
  };
};

2. 更新package.json的构建脚本 #

在构建命令前注入NODE_ENV=production环境变量，触发Babel加载.env.production：

• 针对Mac/Linux系统，直接修改脚本：

"scripts": {
  "build": "NODE_ENV=production expo export:web",
  "start": "expo start" // 保留原开发启动命令
}

• 如需兼容Windows系统，先安装cross-env依赖（npm i cross-env --save-dev），再修改：

"scripts": {
  "build": "cross-env NODE_ENV=production expo export:web",
  "start": "expo start"
}

3. 验证环境变量加载 #

构建前可临时添加日志验证变量是否正确加载：

import { YOUR_VAR } from '@env';
console.log('当前环境变量:', YOUR_VAR);

运行构建命令后，检查生成的web-build包代码，确认变量为.env.production中的值。

注意事项 #

• 确保.env.production和.env处于项目根目录，且变量名与代码引用完全一致
• 若.env.production包含敏感信息，需在.gitignore中添加该文件，避免提交到版本控制

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