一文搞懂在 Vue + Vite 项目中，应该将图片放在 ‘public’ 文件夹还是 ‘src/assets’文件夹

最新推荐文章于 2025-05-29 17:50:25 发布

原创

最新推荐文章于 2025-05-29 17:50:25 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

在 Vue + Vite 项目中，选择将图片放在 public 文件夹还是 src/assets 文件夹取决于你打算如何使用这些图片。

VUE 项目文件的参考结构：

my-vue-app/
├── public/
│   ├── favicon.ico
│   └── images/
│       └── logo.png
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   ├── main.js
│   └── router/
│       └── index.js
├── index.html
├── package.json
└── vite.config.js

`public` 文件夹：

静态资源： 将不需要 Vite 处理的静态资源放在 public 文件夹中。这些文件会直接提供，并保留原始文件名。
直接访问： public 文件夹中的文件可以通过 URL 直接访问。例如，放在 public/images/logo.png 的图片可以通过 http://localhost:3000/images/logo.png 访问。
构建时不变： 这些文件在构建过程中不会被哈希或转换。