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'"