如何在Expo项目中正确使用cross-env配置环境变量？

配置不生效不是cross-env的问题，是Expo本身的环境变量隔离机制导致的：

• cross-env 注入的环境变量仅存在于启动Expo服务的Node.js运行上下文，你在app.config.js这类Node侧执行的配置文件中可以正常读取，但Expo默认不会把自定义环境变量自动打包注入到客户端（手机/模拟器）运行的前端JS代码里，直接在页面、组件代码中读取process.env.LOCAL_IP_ADDRESS会得到undefined。
• Expo SDK 49及以上版本新增了官方环境变量规则，不符合命名规范的自定义变量不会被主动注入到客户端侧，这是最常见的踩坑点。

方案1：遵循Expo官方环境变量命名规范（无额外依赖，推荐） #

Expo官方规定，所有需要在前端业务代码中读取的自定义环境变量，必须以EXPO_PUBLIC_作为前缀，不符合前缀要求的变量不会被注入到客户端bundle。
直接修改package.json中的start脚本即可：

{
  "scripts": {
    "start": "cross-env EXPO_PUBLIC_LOCAL_IP_ADDRESS=TEST expo start"
  }
}

修改完成后重启服务，在业务代码中通过process.env.EXPO_PUBLIC_LOCAL_IP_ADDRESS就能直接读取到TEST值。

方案2：保留原有变量名，通过Babel插件内联注入 #

如果不想修改现有环境变量的命名，可以通过Babel插件在编译阶段将环境变量直接内联到JS代码中：

1. 安装开发依赖

npm install babel-plugin-transform-inline-environment-variables --save-dev

2. 修改项目根目录下的babel.config.js文件，添加对应插件：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['transform-inline-environment-variables']
  };
};

3. 清空Expo缓存重启服务（修改Babel配置后必须清缓存，否则配置不会生效）：

npx expo start -c

配置完成后，你原来写的cross-env LOCAL_IP_ADDRESS=TEST expo start脚本就可以正常工作，业务代码里直接读process.env.LOCAL_IP_ADDRESS就能拿到对应值。

重要提醒：所有注入到客户端侧的环境变量都会被明文打包进公开的前端资源包，不要把接口密钥、账号密码这类敏感信息存在这类可被前端读取的环境变量中，避免信息泄露。

内容的提问来源于stack exchange，提问作者Mahmoud Mousa Hamad