Question

如何使用.env做出反应。我可以使用

访问.env.development和.env.production

 "start":"react-scripts start",
 "build": "react-scripts build",

如何访问另一个像.env.staging？

我这样给了

"build_staging": "set REACT_APP_ENV=staging & react-scripts build",

但没有工作。

请提出任何建议。

Answer 1

为了在linux（我的生产服务器）和windows（我的开发服务器）之间保持一致，我使用cross-env

npm install --save cross-env

我的脚本看起来像这样

"scripts": {
    "dev": "cross-env NODE_ENV=development node server",
    "build": "cross-env NODE_ENV=production next build ",
    "start": "cross-env NODE_ENV=production node server"
  },

所以要设置像REACT_APP_ENV这样的自定义环境，你需要

"build_staging": "cross-env REACT_APP_ENV=staging react-scripts build",

您可以使用

在javascript代码中访问它

process.env.REACT_APP_ENV

也可以启动您可能想要添加的登台服务器

＆＃34; start_staging＆＃34;：＆＃34; cross-env REACT_APP_ENV = staging react-scripts start＆＃34;

有关此here

的更多信息

Answer 2

[上下文] -我用Create React创建了React项目。 -在Windows 10上运行 -使用VSCode IDE -我在.env.development文件夹上方有文件/src。 -我的代码有console.log(process.NODE_ENV)和console.log(process.REACT_APP_YOUR_KEY)

[问题] 当我使用npm start运行程序时，浏览器会为NODE_ENV打印'development'，但是对于我的React .env变量，它将打印undefined。

我尝试通过将npm start的默认脚本更改为以下package.json脚本：start来运行set REACT_APP_YOUR_KEY && react-scripts start。然后没有任何undefined，一切正常。

[解决方案] 原因是未正确检测到文件.env.development。我的假设是环境开发文件，Windows或VSCode不能很好地检测到。

Windows File Explorer files

VS Code explorer. Look up the icon of the files

您必须将文件名从.env.development更改为.env。

如何在反应中使用.env

2 个答案: