为 dev 和 local 设置 React 环境变量

Question

我不熟悉为我的项目做出反应和设置环境变量。这是我所做的..

添加.env-cmdrc.json如下

{
 "development":{
 "REACT_APP_BASE_URL": "https://servername:port/"
 },
 "staging":{
 "REACT_APP_BASE_URL": "http://servername:port/"
 },
  "local":{
  "REACT_APP_BASE_URL": "http://localhost:port/"
  }
 }

已安装 npm

npm install env-cmd or npm install -g env-cmd

编辑package.json如下：

 "start:development": "env-cmd -e development react-scripts start",
 "start:staging": "env-cmd -e staging react-scripts start",
 "start:local": "env-cmd -e local react-scripts start",
 "build:development": "env-cmd -e development react-scripts build",
 "build:staging": "env-cmd -e staging react-scripts build",

尝试过 - npm 运行 start:development

给我 env-cmd 错误
再次运行

npm 安装 env-cmd
现在尝试 - npm 运行 start:development

Failed to find .rc file at default paths: [./.env-cmdrc,./.env-cmdrc.js,./.env-cmdrc.json] at getRCFile

我是第一次这样做，如果有任何帮助，我将不胜感激..我在这里缺少什么..

Answer 1

我建议使用 dotenv 包而不是 env-cmd.

安装包 - npm i dotenv
在您的根目录中创建一个环境文件 - .env
声明一个变量 - REACT_APP_URL=http://localhost/....
使用变量 - process.env.REACT_APP_URL

为了启动 React 应用程序，您需要检查 package.json 文件并确保它包含如下内容：

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

如果可以，您可以运行以下命令：npm start

现在您可以开始编码了:)

Answer 2

我试过你的代码，但效果很好。
检查你的代码，确保你的配置文件的位置.env-cmdrc.json，它应该放在你项目的根目录下（与package.json相同级别）

为 dev 和 local 设置 React 环境变量

Setting up React environment variables for dev and local

reactjs

environment-variables

node-modules

env-cmd