如何在Docusaurus中创建打包后可正常使用的文件下载链接

你使用的pathname://协议仅在Docusaurus本地开发服务中支持特殊路径解析，生产构建阶段不会对该前缀的路径做资源映射，也不会自动将你引用的文件打包到产物目录，因此会出现生产环境链接失效的问题。

• 第一步：将需要提供下载的静态文件放入项目根目录的static文件夹，没有该文件夹可直接新建。比如你的下载文件是file.json，放置后路径为static/file.json，也可以按需创建子目录存放，如static/download/file.json。
• 第二步：直接使用根路径引用资源，无需添加pathname://前缀，两种写法参考如下：
  • Markdown原生链接写法：[JSON dataset](/file.json)
  • 自定义a标签写法：<a target="_blank" href="/file.json" download="file.json">Download</a>

如果你的Docusaurus站点配置了非根路径的baseUrl（比如部署在域名子路径下），需要在路径中拼接baseUrl，或者在React组件中使用官方内置的useBaseUrl钩子处理路径：

import useBaseUrl from '@docusaurus/useBaseUrl';

// 组件内使用
<a href={useBaseUrl('/file.json')} download="file.json">Download</a>

该方案的核心逻辑是Docusaurus在构建时会将static目录下的所有文件原封不动复制到构建产物根目录，路径和开发环境完全一致，因此开发和生产环境都能正常访问。

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