Package.json - NODE_ENV 到生產/部署

Question

我是網絡開發的新手，最近開始將我的簡單網絡應用程序推送到 GitHub 頁面。 我很快發現我的頁面在我集成react-router后不會呈現，因為我的開發和生產 URL 鏈接是不同的。

我的問題是，如何設置我的package.json和.env以便正確呈現我的 URL？

我的.env文件如下所示：

REACT_APP_PUBLIC_URL="my-site"

我的package.json看起來像：

"scripts": {
    "start": "NODE_ENV=development react-scripts start",
    "start:prod": "NODE_ENV=production react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }

在我的Index.js ，我這樣做：

if (process.env.NODE_ENV === "production") {
  require("dotenv").load();
}

console.log("PROCESS.ENV.NODE_ENV: ", process.env.NODE_ENV); // This prints "development"
console.log("PROCESS.ENV.PUBLIC_URL: ", process.env.REACT_APP_PUBLIC_URL); // This prints "my-site"

當我運行npm run start:prod ，我認為它將NODE_ENV設置為production但它似乎並沒有這樣做。

基本上，我想做的是在開發process.env.PUBLIC_URL ，我的process.env.PUBLIC_URL應該是""而在生產過程中，它應該是"my-site" 。 這樣，我的路由器就可以正確呈現相應的視圖。 謝謝你的幫助！

Answer 1

React-scripts 會自動設置 NODE_ENV，請參閱 medium.com 中的文章。 選項之一是使用不同的環境變量，案例MY_APP_ENV

Answer 2

react-scripts可能只是將其覆蓋為development 。 這是我挖掘的一些來源：O

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/start.js#L11

也許您可以考慮的選項是使用不同的 env 變量（您可以非常誠實地定義您想要的任何內容。或者您可以將production構建留給react-scripts / create-react-app因為它們似乎有一些內部邏輯要做這給你。

Answer 3

創建.env.qa1並添加構建腳本：

"build-qa1": "sh -ac '. .env.qa1; react-scripts start'"