如何在运行create-react-app构建脚本时设置构建.env变量？

我用我的创造，反应，应用以下环境变量：如何在运行create-react-app构建脚本时设置构建.env变量？

REACT_APP_API_URL=http://localhost:5555

如何设置不同：

console.log(process.env.REACT_APP_API_URL) // http://localhost:5555

，当我通过读取.env文件运行npm start工作当执行npm run build时值如http://localhost:1234？

这是我package.json文件：

{ 
    "name": "webapp", 
    "version": "0.1.0", 
    "private": true, 
    "devDependencies": { 
    "react-scripts": "0.9.0" 
    }, 
    "dependencies": { 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2" 
    }, 
    "scripts": { 
    "start": "react-scripts start", 
    "build": "react-scripts build", 
    "test": "react-scripts test --env=jsdom", 
    "eject": "react-scripts eject" 
    } 
}

来源

2017-02-25 sigmus

可以使用process.env.NODE_ENV像这样：

const apiUrl = process.env.NODE_ENV === 'production' ? process.env.REACT_APP_PROD_API_URL : process.env.REACT_APP_DEV_API_URL;

你需要有REACT_APP_PROD_API_URL和REACT_APP_DEV_API_URL集。

或者，如果生产的网址永远是一样的，你可以把它简化：

const apiUrl = process.env.NODE_ENV === 'production' ? 'http://localhost:1234' : process.env.REACT_APP_DEV_API_URL;

创建阵营应用设置NODE_ENV以“生产”为你打造，所以你不必担心关于何时将其设置为生产。

来源

2017-02-25 18:12:34

谢谢。我知道这种方法。你认为这是这种情况的典型解决方案吗？ – sigmus

如果你“手动”地做webpack配置，会有很多方法来做到这一点。我不诚实地知道它是否是“规范的”，但是这种方式很有效，并且不会从CRA中退出，所以我喜欢它。 –

我们也在考虑在将来添加对特定于环境的.env文件的支持。 –

我想你现在已经有了这个工作，但是对于发现这个问题的其他人，你可以在你的“create-react-app”项目的根目录下的.env文件中设置默认环境变量。 .env.development和.env.production -

要使用npm start和npm run build您可以创建两个ENV文件时分离出使用的变量。

npm start将设置REACT_APP_NODE_ENV到development，所以它会自动使用.env.development文件，npm run build套REACT_APP_NODE_ENV到production，所以它会自动使用.env.production。在这些值中设置的值将覆盖您的.env中的值。

如果你与其他人一起工作，并具有特定值到你的机器而已，你可以将这些值到一个新的文件中.env.development和.env.production覆盖值 - 分别为.env.development.local和.env.production.local。

编辑：我应该指出，你设置的环境变量必须以“REACT_APP_”开始，例如。 “REACT_APP_MY_ENV_VALUE”。

编辑2：，如果你需要的不仅仅是开发和生产更多，使用env-cmd，由this comment规定。

来源

2017-09-22 14:22:49 Baldeep

你如何访问代码中的env变量？ –

@SebastianBean它使用节点process.env：'process.env.REACT_APP_API_URI'。请参阅[CRA文档]（https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables） –

如果构建脚本始终将environment ='production'。我如何将我的环境='测试'部署到我的测试服务器？ – caffeinescript

如何在运行create-react-app构建脚本时设置构建.env变量？

回答

相关问题