我可以在不弹出的情况下更改 create-react-app 中公共文件夹的名称吗？

Question

我有一个我已经设置的 create-react-app 项目（express 和 node 连接到后端的 mysql 数据库，以防万一），它工作得很好。 我的项目经理告诉我，我需要将“public”目录的名称更改为“static”（该目录保存/将保存我的静态文件，例如我的 index.html 和我需要提供的任何媒体）为了使其正确部署，但是我能找到的唯一解决方案是弹出，以便我可以更改“PUBLIC_URL”的值。 目前，当我运行“npm run start”时出现错误，其中记录：“找不到所需的文件。 名称：index.html'，它仍在公共目录中搜索（我已将其更改为“静态”）。 我的代码中没有任何地方引用公共文件夹。

根据我的理解（如果我错了，请有人纠正我）， PUBLIC_URL 变量由 create-react-app 设置为公共文件夹的路径。 我想将其更改为静态文件夹，但我发现的唯一解决方案似乎可能涉及弹出然后手动更改变量。 有没有办法在不弹出的情况下设置该变量，或者做一些其他的解决方法来更改该目录，如果没有，最简单的方法是什么（我宁愿不弹出，但如果它是唯一的方法）...我真的只需要目录来更改名称，并且我发现自己对我认为相当简单的更改感到沮丧。

谢谢！

编辑：这是我的 package.json：

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "1.1.5"
  },
  "scripts": {
    "start": "PORT=8080 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Answer 1

PUBLIC_URL是一个可以设置的变量。

您可以在控制台中设置它

export PUBLIC_URL="/static"

创建反应应用程序将从process.env.PUBLIC_URL获取它

您可以在拉取请求线程中阅读更多相关信息以实现此功能

Answer 2

在基于 Unix 的系统上，您可以使用“mv”命令简单地将构建文件夹移动到一个新文件夹。

我有这个作为我的 package.json 上的构建脚本：

"build": "react-scripts build && rm -rf static && mv build static"

我构建我的项目，然后删除任何先例的“静态”文件夹，最后将我的“构建”文件夹移动到一个新的“静态”文件夹。

Answer 3

我真的很惊讶它实际上是多么简单。

1. 使用您选择的包管理器安装react-app-rewired 。

2. 在项目的根目录创建一个config-overrides.js文件

3. 将以下代码粘贴到config-overrides.js

const path = require('path');
module.exports = {
    paths: function (paths, env) {
        // Changing public to static
        paths.appPublic = path.resolve(__dirname, 'static');
        paths.appHtml = path.resolve(__dirname, 'static/index.html');
        return paths;
    }
}

4. 在项目的根目录创建一个.env文件并写入PUBLIC_URL='./static'

希望这可以帮助任何尝试这样做的人。

Answer 4

package.json.scripts（适用于 WINDOWS）

"start03": "set FOLDER=chapter03 && react-app-rewired start",
"build03": "set FOLDER=chapter03 && react-app-rewired build", 

react-app-rewired

    const path = require('path');
    module.exports = {paths: function (paths, env) {

          const folder = process.env.FOLDER.trim()

           // Changing public to static
           paths.appPublic = path.resolve(`${ __dirname }/src/${ folder }/_public`)
           paths.appHtml = path.resolve(`${ __dirname }/src/${ folder }/_public/index.html`)
           paths.appIndexJs = path.resolve(`${ __dirname }/src/${ folder }/index.js`)
           paths.appBuild = path.resolve(`${ __dirname }/build/${ folder }`)

           return paths;
        },
    }