如何在Remix中链接静态资源（PDF文件）？

我想在组件中添加一个指向应用代码库内PDF文档的链接：

const SomeComponent = () => {
    ...
    return <a href="../../shared-assets/some-pdf.pdf">Download</a>
}

我已将该PDF文件放入public文件夹，也尝试过放在项目根目录的自定义文件夹（shared-assets）中，但两次都无法找到文件——可能是因为该文件的路由不存在（我不知道该如何配置）。

我还尝试像导入图片一样导入它，但终端抛出错误：“No loader is configured for '.pdf' files”。

import somePdf from '../../shared-assets/some-pdf.pdf';
...
<a href={somePdf}>Download</a>

请问该如何解决这个问题？

解决方法 #

方法一：用public文件夹（最简单，无需额外配置） #

• 把PDF文件放到项目根目录的public文件夹里，可建子文件夹分类存放，比如public/docs/some-pdf.pdf
• 组件里直接用根路径访问，不用写相对路径：

  const SomeComponent = () => {
      return <a href="/docs/some-pdf.pdf" download>Download PDF</a>
  }
  

  • 重点：href开头的/代表从public文件夹的根目录开始，不管组件在哪个层级都能精准找到文件
  • 加download属性可触发浏览器下载（部分浏览器可能先预览，取决于用户浏览器设置）

方法二：导入方式使用（适合放在src目录下的自定义文件夹） #

如果不想把PDF放public，想和业务代码放在一起，需根据脚手架配置文件loader：

针对Create React App项目

1. 安装file-loader：

   npm install file-loader --save-dev
   

2. 在项目根目录新建react-app-rewired.config.js（无则新建），添加配置：

   module.exports = function override(config, env) {
     config.module.rules.push({
       test: /\.pdf$/,
       use: [
         {
           loader: 'file-loader',
           options: {
             name: '[name].[ext]',
             outputPath: 'docs/', // 打包后文件存放目录
           },
         },
       ],
     });
     return config;
   };
   

3. 在组件里正常导入使用：

   import somePdf from '../shared-assets/some-pdf.pdf';
   
   const SomeComponent = () => {
       return <a href={somePdf} download>Download PDF</a>
   }
   

针对Vite项目

Vite默认支持静态资源导入，无需额外安装loader，直接导入即可：

import somePdf from '../shared-assets/some-pdf.pdf';

const SomeComponent = () => {
    return <a href={somePdf} download>Download PDF</a>
}

• Vite会自动处理导入的PDF文件，打包时放到dist目录下，生成正确访问路径

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