使用create-react-app时使用自定义构建输出文件夹

基础概念

create-react-app 是一个官方支持的用于创建单页 React 应用程序的脚手架工具。它提供了一个现代的构建设置，无需配置即可运行。默认情况下，create-react-app 会将构建输出放在 build 文件夹中。

自定义构建输出文件夹

你可以通过配置 package.json 文件中的 homepage 字段或使用环境变量来更改构建输出文件夹的位置。

方法一：使用 `homepage` 字段

在 package.json 文件中添加或修改 homepage 字段，指定一个新的路径。例如，如果你想将构建输出放在 dist 文件夹中：

{
  "name": "your-app",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "dependencies": {
    // ...
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  }
}

然后运行构建命令：

npm run build

方法二：使用环境变量

你可以在构建命令中使用环境变量来指定输出文件夹。例如，使用 PUBLIC_URL 环境变量：

PUBLIC_URL=./dist npm run build

或者在 .env 文件中设置：

PUBLIC_URL=./dist

然后运行构建命令：

npm run build

优势

灵活性：允许你自定义构建输出文件夹，适应不同的项目需求。
易于管理：将构建输出放在特定文件夹中，便于管理和部署。
兼容性：create-react-app 的配置方式简单且兼容性好，适合大多数项目。

应用场景

多环境部署：在不同的环境中（如开发、测试、生产），可能需要不同的构建输出路径。
版本控制：将构建输出放在特定文件夹中，便于版本控制和历史记录管理。
自动化部署：与 CI/CD 工具集成时，自定义输出文件夹可以简化部署流程。

常见问题及解决方法

问题：构建输出文件夹未更改

原因：可能是 homepage 字段或环境变量设置不正确。

解决方法：

确保 package.json 中的 homepage 字段设置正确。
确保环境变量设置正确，并且在构建命令中生效。

问题：构建过程中出现路径错误

原因：可能是路径设置不正确或路径中包含特殊字符。

解决方法：

检查 homepage 字段或环境变量的路径设置，确保路径正确且不包含特殊字符。
使用绝对路径或相对路径进行测试，确保路径解析正确。

示例代码

假设你想将构建输出放在 dist 文件夹中，可以在 package.json 中添加如下配置：

{
  "name": "your-app",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "dependencies": {
    // ...
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  }
}

然后运行构建命令：