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"。这样，我的路由器就可以正确呈现相应的视图。感谢您的帮助！

Answer 1

反应脚本会自动设置NODE_ENV，请参阅medium.com中的article。选项之一是使用不同的环境变量，大小写为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，因为它好像他们有一些internal logic to do this for you。

Answer 3

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

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

Package.json-NODE_ENV进行生产/部署

3 个答案: