reactjs-運行create-react-app構建腳本時如何設置build .env變量?

我在create-react-app中使用以下環境變量:

console.log(process.env.REACT_APP_API_URL)           
          

           
3個解決方案
97 votes

我想您現在可以正常工作了,但是對于其他發現此問題的人,您可以在“ create-react-app”項目根目錄的.env.development文件中設置默認環境變量。

要分離出使用.env.development.env.production時使用的變量,可以創建另外兩個env文件-.env.development.local.env.production.local

.env.development會將.env.production設置為.env.development.local,因此它將自動使用.env.production.local文件,而npm run build則將REACT_APP_NODE_ENV設置為production,因此它將自動使用.env.production。其中設置的值將覆蓋您的2755823417453中的值。

如果您正在與其他人一起工作可以领救济金的游戏,并且僅具有特定于您計算機的值,則可以通過將這些值分別添加到新文件-.env.development.local.env.production.local中來覆蓋.env.development.env.production中的值。

編輯:我應該指出可以领救济金的游戏,您設置的環境變量必須以“ REACT_APP_”開頭。 “ REACT_APP_MY_ENV_VALUE”。

編輯2:如果您不僅需要開發和生產,請使用此注釋指定的env-cmd。

answered 2020-02-20T11:20:04Z
39 votes

您可以像這樣使用npm start

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

您將需要設置npm startREACT_APP_DEV_API_URL

或者,如果生產URL始終相同,則可以簡化它:

const apiUrl = process.env.NODE_ENV === 'production' ? 'https://example.com' : process.env.REACT_APP_DEV_API_URL;

Create React App在構建時將npm start設置為“生產”,因此您無需擔心何時將其設置為生產。

注意:您必須重新啟動服務器(例如,再次運行npm start)以檢測環境變量的變化。

answered 2020-02-20T11:19:20Z
11 votes

如果您想使用單獨的dotenv文件來構建和/或部署到單獨的環境(stage,prod),則可以使用env-cmd,如下所示:

npm install --save-dev env-cmd
./node_modules/.bin/env-cmd -f ./stage.env npm build

然后只需相應地更新package.json

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:stage": "env-cmd -f ./.env.stage npm run-script build"
  },

然后要構建,只需運行以下shell命令:

npm run build:stage
answered 2020-02-20T11:20:34Z
translate from