React点击按钮下载public文件夹文件提示无文件如何解决

报错Failed - No file的核心原因是浏览器请求/test.xlsx路径时没有拿到对应文件，本质是静态资源路径映射错误，绝大多数场景不需要修改webpack配置，按以下步骤排查即可：

优先排查路径与目录位置（无需改webpack） #

• 确认文件存放位置正确：test.xlsx必须放在项目根目录和src平级的public文件夹，不要放到src目录下的子public文件夹，否则构建工具不会将该文件拷贝到最终部署的产物根目录。
• 修正硬编码路径问题：不要直接写死href="/test.xlsx"，如果你的项目部署在域名子路径下（比如https://xxx.com/my-app/），硬编码根路径会直接请求域名根目录下的文件，必然404。需要根据项目使用的构建工具拼接公共基础路径：
  • 基于Create React App/Vue CLI搭建的项目，用process.env.PUBLIC_URL拼接：

    <a 
      href={`${process.env.PUBLIC_URL}/test.xlsx`} 
      download
    >
      click
    </a>
    

    注：不要在a标签内嵌套button，不符合HTML规范会导致点击事件异常，直接给a标签写按钮样式即可。
  • 基于Vite搭建的项目，用import.meta.env.BASE_URL拼接：

    <a 
      href={`${import.meta.env.BASE_URL}test.xlsx`} 
      download
    >
      click
    </a>
    

• 有效性验证：本地启动服务后，直接在浏览器地址栏访问本地服务地址/test.xlsx，如果能正常打开文件或触发下载，说明路径映射正常，此时点击下载按钮就不会报错。

自定义webpack场景需补充配置 #

如果你是从零手动搭建的webpack项目，没有使用现成脚手架，才需要修改webpack配置，通过插件把public目录的静态文件拷贝到构建产物目录：

1. 安装拷贝静态资源的依赖：

npm install copy-webpack-plugin --save-dev

2. 在webpack.config.js中添加插件配置：

const CopyPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  // 其他原有webpack配置省略
  plugins: [
    // 其他原有插件配置省略
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'public'),
          to: path.resolve(__dirname, 'dist'), // 替换为你项目实际的构建输出目录
          globOptions: {
            ignore: ['**/index.html'], // 排除已经被html-webpack-plugin处理的入口html文件
          }
        }
      ],
    }),
  ]
}

3. 重启开发服务、重新执行构建，文件会被正确输出到部署根路径，下载功能恢复正常。

额外踩坑提醒 #

• 不要用import语法引入public目录下的xlsx文件，否则会被webpack当作模块处理自动加hash后缀，和你写的固定路径不匹配。
• 如果部署到Nginx等服务端，需要确认服务端没有拦截xlsx后缀的静态资源请求，不要把这类请求转发到前端路由入口。

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