Loading... # 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; } ``` 最后修改：2025 年 04 月 09 日 © 允许规范转载 打赏 赞赏作者 赞 咱们谁跟谁，用不着～