如何在運行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變量？

回答

相關問題