Vue中 public 和 assets 目录的区别

一、

1. 放在 public 文件夹
   特点： 文件会直接暴露在根目录，可以通过 URL 直接访问，例如 http://localhost:3000/fonts/my-font.ttf。

适用场景：
需要直接通过 URL 引用（例如字体 URL 在 CSS 文件中写死，或者动态加载字体文件）。
文件不会经过 Webpack/Vite 构建处理，减少构建时间。
需要避免缓存问题：更改字体文件后，URL 会保持不变（可配合文件名版本号）。
文件路径和使用示例：
将字体文件放在 public/fonts/。
使用路径直接引用：

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/my-font.ttf') format('truetype');
}

body {
  font-family: 'MyFont', sans-serif;
}

2. 放在 assets 文件夹
   特点： 文件会被 Webpack 或 Vite 处理和优化（比如压缩、生成哈希文件名等），并且路径会被自动解析。

适用场景：
项目中的静态资源文件不需要暴露在根目录下。
需要借助 Webpack/Vite 对文件做处理（如哈希命名、自动压缩等）。
希望让构建工具管理资源文件路径，减少路径管理的复杂性。
文件路径和使用示例：
将字体文件放在 src/assets/fonts/。
使用 @ 或相对路径引用：

@font-face {
  font-family: 'MyFont';
  src: url('@/assets/fonts/my-font.ttf') format('truetype');
}

body {
  font-family: 'MyFont', sans-serif;
}