如何在React部署到GitHub Pages时排除public下的assets文件夹？

方法一：构建前临时移走assets文件夹（最简单） #

不用改任何配置，直接在构建脚本里先把public/assets临时挪走，构建完再移回来——这样React构建时找不到这个文件夹，自然不会把旧文件复制到build目录里：

Windows系统 #

修改package.json里的build脚本：

"scripts": {
  "build": "move public\\assets public\\assets-temp && react-scripts build && move public\\assets-temp public\\assets",
  // 保留其他原有脚本
}

macOS/Linux系统 #

修改package.json里的build脚本：

"scripts": {
  "build": "mv public/assets public/assets-temp && react-scripts build && mv public/assets-temp public/assets",
  // 保留其他原有脚本
}

这么做既不会影响本地的assets文件夹，部署时也不会把旧文件推到GitHub Pages，不会覆盖工作流更新的内容。

方法二：修改Webpack配置排除assets文件夹（适合长期自定义构建规则） #

如果用Create React App又不想eject，可以用react-app-rewired来改Webpack的复制规则：

1. 先装依赖：

npm install --save-dev react-app-rewired customize-cra copy-webpack-plugin

2. 在项目根目录新建config-overrides.js：

const { override } = require('customize-cra');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = override((config) => {
  // 找到负责复制public文件的CopyWebpackPlugin实例
  const copyPlugin = config.plugins.find(plugin => plugin instanceof CopyWebpackPlugin);
  if (copyPlugin) {
    // 给复制规则加过滤，排除assets文件夹
    copyPlugin.options.patterns.forEach(pattern => {
      if (pattern.from === 'public') {
        pattern.filter = resourcePath => !resourcePath.includes('assets');
      }
    });
  }
  return config;
});

3. 把package.json里的脚本换成react-app-rewired：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

方法三：Vite项目适配 #

如果你的React项目用Vite构建，修改vite.config.js，通过复制插件排除public/assets：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import copy from 'rollup-plugin-copy';

export default defineConfig({
  plugins: [
    react(),
    copy({
      targets: [
        {
          src: 'public/**/*',
          dest: 'dist',
          ignore: ['public/assets/**/*']
        }
      ],
      hook: 'writeBundle'
    })
  ]
});

这样构建时public/assets不会被复制到dist目录，部署时就不会覆盖GitHub Pages上由工作流维护的assets文件夹。

内容的提问来源于stack exchange，提问作者Rob Upchurch