Vite项目中public与assets文件夹的适用场景及最佳实践

实际差异 #

构建处理逻辑 #

• assets文件夹：资源会被纳入Vite的构建资源图谱，构建时会对文件名进行哈希处理（比如react.svg变成react.hash.svg），同时支持通过插件进行压缩、格式转换等优化，最终输出到dist/assets目录下。
• public文件夹：资源不会参与任何构建处理，会被原封不动地复制到dist根目录，保留原始文件名，也不会经过插件优化。

引用方式 #

• assets资源：需要在源码中通过import导入获取资源URL，或者使用相对路径（如./assets/react.svg），Vite会自动处理为构建后的正确路径。

  import reactLogo from './assets/react.svg';
  // 使用时直接传入src
  <img src={reactLogo} alt="React logo" />
  

• public资源：只能通过绝对路径引用（如/vite.svg），不需要导入，直接在代码或HTML中写路径即可，Vite会在构建后映射到dist根目录下的对应文件。

  <!-- index.html中引用 -->
  <link rel="icon" href="/vite.svg" />
  <!-- 组件中引用 -->
  <img src="/vite.svg" alt="Vite logo" />
  

缓存策略 #

• assets资源：哈希后的文件名天然支持长期缓存，当资源内容更新时，文件名哈希值会变化，浏览器会自动加载新资源，无需手动处理缓存失效。
• public资源：由于保留原始文件名，无法通过文件名变化触发缓存更新，需要依赖HTTP缓存头配置（如Cache-Control）来控制缓存策略，或者手动修改文件名来强制更新。

官方示例的特殊情况说明 #

官方React + Vite示例中同时使用两种文件夹的图标，主要是为了演示两种不同的资源引用方式，而非推荐混用：

• react.svg放在assets：展示源码中导入资源的常规用法，适合组件内引用的动态资源。
• vite.svg放在public：一方面在index.html中作为favicon引用（绝对路径更直接），另一方面在组件中展示public资源的引用方式，同时复用了同一份文件，减少冗余。

最佳实践 #

优先使用assets的场景 #

• 组件或业务代码中需要引用的图片、图标、样式文件等资源。
• 需要构建优化（压缩、格式转换）、依赖哈希缓存的资源。
• 资源内容会随版本迭代更新，需要自动触发浏览器缓存更新的。

适合使用public的场景 #

• 不需要在源码中引用的静态资源，如robots.txt、sitemap.xml、CNAME等。
• 必须保留原始文件名的资源，比如第三方服务要求固定路径的文件（如支付回调页面、验证文件）。
• 静态HTML文件（如index.html）中直接引用的固定路径资源（如favicon），且不需要哈希处理的。
• 不想参与构建流程的资源（如大体积的静态数据文件，无需优化或哈希）。

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