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

在 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 访问。
  • 构建时不变: 这些文件在构建过程中不会被哈希或转换。

src/assets

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

surfirst

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值