Package.json - 将 NODE_ENV 设置为生产/部署

Question

我是一名web开发的新手，最近开始将我的简单web应用程序推送到GitHub页面。我很快发现，在集成了react-router后，我的页面无法呈现，因为我的dev和prod 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应该为""，而在生产环境中，它应该为"my-site"。这样，我的路由器就可以正确地呈现相应的视图。谢谢你的帮助！

- Tim

---

@rc_dz 是的，我保存了它。我也意识到我在原始帖子中打错了一个字，并进行了编辑。console.log(process.env.REACT_APP_PUBLIC_URL) 打印出 "my-site"，但是 process.env.NODE_ENV 打印出 development，而我期望它打印出 production，即使我执行了 npm run start:prod。 - Tim

@rc_dz 正确的，我没有在 start 和 prod 之间放置空格，我正在运行 npm run start:prod。 - Tim

你可以尝试切换到以下代码并查看结果："start": "NODE_ENV=production react-scripts start", "start:prod": "NODE_ENV=development react-scripts start", - rc_dz

@rc_dz 用那个组合，它仍然打印出 NODE_ENV 是 development :-( - Tim

让我们在聊天中继续这个讨论。 - rc_dz

Answer 1

React-scripts会自动设置NODE_ENV环境变量，详情请见medium.com上的文章。 其中一个选项是使用不同的环境变量，例如MY_APP_ENV

- rc_dz

---

我通过阅读那篇文章并将我的 .env 文件分成 production.env 和 development.env 两个文件，成功解决了问题 :-) - Tim

Answer 2

有可能是react-scripts覆盖了它的值为development。这是我找到的一些源代码 :O

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

也许你可以考虑使用不同的环境变量（你可以随意定义）。或者你可以将production构建留给react-scripts/create-react-app，因为它们似乎有一些内部逻辑来为你完成这个操作。

- aug

---

感谢您的帮助！ - Tim

Answer 3

创建.env.qa1文件并添加构建脚本：

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

- Idan