Gatsbyjs开发中引用本地PDF配置链接时地址栏URL出现多余字符的问题

• 你对Gatsby static 目录的使用规则和引用逻辑搞反了。Gatsby的static目录设计初衷，是存放不需要经过Webpack打包流程处理、构建时会被原封不动复制到网站产物根目录的静态文件，这个目录下的所有文件禁止通过JS的import语法引入。
• 当你用import resume from "../../static/samplepdf.pdf"的写法引入static目录下的文件时，Gatsby内置的资源解析器会误把这个文件当成需要加工、追加文件哈希指纹的代码模块，最终生成带随机哈希后缀的异常访问路径，直接导致你点击链接时地址栏出现多余字符、资源访问路径不符合预期。

方案1：简历类静态文件存在static目录（最适合个人作品集场景） #

这种方式的优势是文件访问路径固定，不依赖打包流程解析，部署后可以直接通过固定路径访问简历文件：

• 不需要写任何import逻辑，直接用站点根路径拼接文件名即可：你把文件存在static/samplepdf.pdf路径下，构建完成后它的固定访问路径就是/samplepdf.pdf
• 修改后的完整代码：

<li>
  <label htmlFor="resume">resume: </label>
  <a href="/samplepdf.pdf" target="_blank" rel="noreferrer" id="resume-link">
    <FaNews className="social-icon"></FaNews>
    resume
  </a>
</li>

• 小优化：你之前给简历链接设置的id是email，和实际功能不匹配，可以顺手改成和简历功能对应的id值，避免后续写样式或交互逻辑时出现混淆。

方案2：需要做资源版本管理时，把PDF移到src目录下 #

如果你希望简历文件和其他代码资源一样，经过打包流程生成带缓存哈希的路径，方便后续更新简历文件时避免用户拿到本地旧缓存版本，可以把PDF移出static目录：

• 第一步：把static/samplepdf.pdf移动到项目src下的自定义路径，比如src/assets/files/samplepdf.pdf
• 第二步：按照正确的相对路径写import引入逻辑，这时候资源解析器会正确返回有效访问路径，不会出现异常字符
• 对应代码示例：

import resume from "../assets/files/samplepdf.pdf" // 根据你实际的文件层级调整相对路径

<li>
  <label htmlFor="resume">resume: </label>
  <a href={resume} target="_blank" rel="noreferrer" id="resume-link">
    <FaNews className="social-icon"></FaNews>
    resume
  </a>
</li>

补充注意：如果项目配置了pathPrefix（比如部署在GitHub Pages的子项目路径下），写static目录文件的路径时不需要手动拼接前缀，Gatsby会自动为路径匹配配置的前缀值，不会出现资源404的问题。

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