Vite搭建网站部署Netlify后Resume.pdf访问404问题求助

问题根源 #

本地开发时用相对路径../Resume.pdf能找到文件，但Vite打包后，组件的编译产物会放在dist/assets目录下，此时相对路径会指向dist的上级目录（而Netlify部署的是dist本身），导致找不到PDF文件。

解决方案 #

1. 迁移PDF文件到public目录 #

• 在项目根目录创建public文件夹（Vite默认支持该目录，无需额外配置）
• 将Resume.pdf移动到public文件夹中
• 注意：index.html保持在根目录即可，无需移动，Vite的规则是index.html在根，public存放无需编译的静态资源，二者不冲突。

2. 修改链接为绝对路径 #

修改Navbar.jsx中的href属性为绝对路径：

<li className="w-[160px] h-[60px] flex justify-between items-center ml-[-100px] hover:ml-[-10px] duration-300 bg-[#565f69]">
  <a
    className="flex justify-between items-center w-full text-gray-300"
    href='/Resume.pdf' // 改为绝对路径
    target='_blank'
  >
    Resume <BsFillPersonLinesFill size={30} />
  </a>
</li>

3. 验证配置（可选但推荐） #

• 执行npm run build打包项目，检查dist目录下是否直接存在Resume.pdf
• 用npx serve dist启动本地生产环境服务，测试PDF链接是否能正常打开
• 确认无误后重新部署到Netlify

关于_redirects的说明 #

如果你的项目是SPA（单页应用），保持_redirects文件在public目录中，内容为：

/* /index.html 200

Netlify会优先匹配真实存在的静态文件（比如Resume.pdf），只有当路径不存在时才会走SPA fallback，不会影响PDF的访问。

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