React项目点击菜单打开PDF报错，寻求最优解决方案

报错原因是项目的打包工具（Webpack/Vite）未配置处理PDF文件的加载器，直接import PDF会触发该问题。下面是几种靠谱的实现方式：

方式一：将PDF放入public目录（推荐） #

这是最省心的方法，无需修改任何配置：

1. 把test.pdf移动到项目根目录的public文件夹中（没有就新建），例如存放路径为public/pdf/test.pdf
2. 修改点击事件代码，直接使用文件的相对路径：

const handleOpenPDF = () => {
  window.open('/pdf/test.pdf');
}

3. 删除原来的import testPDF语句
   这种方法的优势在于PDF文件不会被打包工具处理，直接复制到构建后的目录，加载速度更快，尤其适合你这种7MB的大文件。

方式二：配置打包工具的加载器 #

如果一定要用import的方式，就给打包工具添加PDF处理规则：

若使用Webpack 4 #

1. 安装file-loader：

npm install file-loader --save-dev

2. 在webpack.config.js中添加规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(pdf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'pdfs/'
            }
          }
        ]
      }
    ]
  }
}

配置完成后，原来的import代码就能正常运行。

若使用Webpack 5 #

Webpack 5自带资源模块，无需额外安装loader，直接添加规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(pdf)$/,
        type: 'asset/resource',
        generator: {
          filename: 'pdfs/[name].[ext]'
        }
      }
    ]
  }
}

若使用Vite #

Vite默认支持静态资源import，如果仍报错，检查vite.config.js是否排除了PDF类型，或者直接用方式一更省事。

总结 #

优先选择方式一，不用折腾配置，大文件加载也更高效，完全能满足你的需求。

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