使用create-react-app/Travis CI/Netlify时dotenv阻碍生产构建求助

我之前也碰到过类似的情况，咱们来一步步捋清楚问题根源和解决办法：

1. 先移除手动的Dotenv加载代码 #

首先把require('dotenv').load()这行代码完全删掉——Create React App（CRA）本身已经内置了Dotenv的自动处理逻辑，手动调用load()反而会和内置流程冲突：

• 开发环境（npm start）会自动加载.env、.env.development、.env.local
• 生产构建（npm run build，也就是Travis/Netlify执行的命令）会自动加载.env、.env.production、.env.production.local

手动加载在CI环境中很可能因为找不到本地的.env文件直接报错，这就是你在Travis里遇到的问题。

2. 正确配置生产环境变量 #

要避免应用访问localhost，你需要给生产环境指定正确的API地址：

• 如果变量不敏感，在项目根目录创建.env.production文件，添加配置：

  REACT_APP_API_URL=https://your-production-api-domain.com
  

  划重点：CRA只会暴露前缀为REACT_APP_的环境变量，必须加这个前缀才能在代码里访问到！

• 如果变量包含敏感信息（比如API密钥），别把.env.production提交到git，而是在后台配置：
  • 在Travis CI的项目设置→Environment Variables里添加REACT_APP_API_URL和对应值
  • 在Netlify的站点设置→Environment→Environment variables里同步添加这个变量，确保构建和运行时都能获取到

3. 代码里正确引用环境变量 #

把代码里硬编码的localhost地址替换为环境变量调用：

const apiBaseUrl = process.env.REACT_APP_API_URL;
// 后续用apiBaseUrl发起请求即可

4. 检查Travis构建配置 #

确保你的.travis.yml里用的是标准CRA构建命令：

script:
  - npm run build

CRA的build命令会自动把环境变量注入到静态文件中，不需要额外处理。

5. 排查残留问题（如果还有报错） #

如果调整后还是有问题，去Travis的构建日志里找具体错误：

• 如果提示环境变量未定义，检查变量名是否带了REACT_APP_前缀，或者Travis/Netlify的配置是否生效
• 如果构建时找不到文件，确认项目结构符合CRA默认规范，没修改过核心构建流程

这样调整后，Travis就能顺利完成构建，Netlify部署后的应用也会使用你配置的生产环境地址，不会再访问localhost了。

内容的提问来源于stack exchange，提问作者J Seabolt