如何更改 React 项目中的生产构建静态文件夹路径？

更新：

你需要更新 webpack 配置来实现这一点。有多种方法可以做到这一点：

1. 反应脚本弹出（不推荐）
2. 补丁包
3. react-app-rewired

我正在为patch-package.
您需要对config/webpack.config.jsreact-scripts 包的文件进行更改。这是您需要进行的更改的 git diff：

diff --git a/node_modules/react-scripts/config/webpack.config.js b/node_modules/react-scripts/config/webpack.config.js
index 26c2a65..ad29fbd 100644
--- a/node_modules/react-scripts/config/webpack.config.js
+++ b/node_modules/react-scripts/config/webpack.config.js
@@ -212,13 +212,13 @@ module.exports = function (webpackEnv) {
       // There will be one main bundle, and one file per asynchronous chunk.
       // In development, it does not produce real files.
       filename: isEnvProduction
-        ? 'static/js/[name].[contenthash:8].js'
+        ? 'static/dashboard/js/[name].[contenthash:8].js'
         : isEnvDevelopment && 'static/js/bundle.js',
       // TODO: remove this when upgrading to webpack 5
       futureEmitAssets: true,
       // There are also additional JS chunk files if you use code splitting.
       chunkFilename: isEnvProduction
-        ? 'static/js/[name].[contenthash:8].chunk.js'
+        ? 'static/dashboard/js/[name].[contenthash:8].chunk.js'
         : isEnvDevelopment && 'static/js/[name].chunk.js',
       // webpack uses `publicPath` to determine where the app is being served from.
       // It requires a trailing slash, or the file assets will get an incorrect path.
@@ -676,8 +676,8 @@ module.exports = function (webpackEnv) {
         new MiniCssExtractPlugin({
           // Options similar to the same options in webpackOptions.output
           // both options are optional
-          filename: 'static/css/[name].[contenthash:8].css',
-          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
+          filename: 'static/dashboard/css/[name].[contenthash:8].css',
+          chunkFilename: 'static/dashboard/css/[name].[contenthash:8].chunk.css',
         }),
       // Generate an asset manifest file with the following content:
       // - "files" key: Mapping of all asset filenames to their corresponding

现在，如果您进行这些更改，node_modules/react-scripts/config/webpack.config.js您会将文件输出到您想要的文件夹，并且 index.html 也会有正确的路径。
但是如果您安装/卸载任何软件包，node_modules 中的更改将被覆盖。要保留这些更改，您可以使用patch-package，它会在安装后在 node_modules 中写入您的更改。

以下是设置补丁包的步骤，您可以阅读他们的自述文件以获取更多详细信息：

1. yarn add patch-package postinstall-postinstall

2. 在 package.json 的脚本部分添加这个：
   "postinstall": "patch-package"

3. 运行 patch-package 创建一个 .patch 文件：
   npx patch-package some-package

4. 提交补丁文件以与您的团队共享修复
   git add patches/react-scripts+4.0.3.patch
git commit -m "change output dir structure in react-scripts"

我也创建了一个git 存储库供您参考。

旧答案：

警告：不适用于移动构建文件夹的内容。只能移动整个构建文件夹。例如：mv build/ dist/

更改 create react app 的设置以使其输出到不同的文件夹将非常复杂。但是您可以在构建完成后移动文件，这非常简单。

在你的 package.json 你有：

"scripts": {
  "build": "react-scripts build"

您可以添加另一个称为postbuild在构建后执行某些操作的脚本，并将由 npm/Yarn 自动调用。

"postbuild": "mv build/ dist/"

这应该将文件移动到不同的文件夹。