在Vite+React中使用/与public访问公共文件夹的差异

• 官方推荐的/根路径方式（import logo from "/test.svg"）

  • 完全贴合Vite对public文件夹的设计逻辑：public内的文件在构建时会原封不动复制到dist根目录，用根路径访问刚好对应最终的部署路径。
  • Vite会直接识别这种路径指向public资源，不会对文件做额外的hash重命名（如果需要保持资源文件名不变，这点很关键）。
  • 部署时就算项目放在子路径（比如配置base: "/my-app/"），Vite也会自动适配根路径，不会出现资源找不到的问题，也不会触发任何警告。

• 直接引用public目录的方式（import logo from "public/test.svg"）

  • 这种方式相当于把public当成了普通源码目录，虽然本地开发能正常访问，但不符合Vite的设计规范，所以会弹出警告。
  • 存在潜在风险：构建后public里的文件位于dist根目录，而你的引用路径还是public/test.svg，如果部署时项目不在域名根路径（比如放在子路径下），浏览器会去/my-app/public/test.svg查找资源，但实际资源在/my-app/test.svg，直接导致404。
  • 另外，Vite可能会对这类引用的资源做不必要的处理，比如添加hash后缀，导致你的引用路径和实际生成的文件名不匹配，后续访问失效。

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