一、根目录下的public目录
该目录为纯静态文件，图片等放该目录后，打包构建时，vite不会做任何处理，构建为dist目录后，直接复制到images文件夹下。
那么在组件中要这样写才能正确引用这些资源：
html:
<img src="/images/slogo.png" alt="logo" width="120" />
CSS:
<style lang="less">
.login {
background: rgba(163, 203, 255, 0.2) url(/images/login-bg.png) no-repeat
center;
}
</style>
请注意，不需要写public目录，如果你写了也能正常访问该静态资源，但是vite会警告你用
/images/login-bg.png来代替/public/images/login-bg.png
另外的坑点是，这样写./public/images/login-bg.png其实在开发环境也能正常访问到该图片，可是构建为dist目录后，处理就有问题了，它会到assets/public/images下去找这张图片，导致404错误。
二、src下的assets目录
如果静态资源是放在src/assets目录那么会经过vite打包处理，包括压缩、重命名等，其他所有的构建后的JS、CSS都会放在dist/assets文件下。
在组件中如何写路径才能引用这些静态资源呢？方法就是像引用其他src下的组件或JS一样的方式，比如:
<img src="@/assets/images/test.jpg" alt="logo" width="120" />
@需要在vite.config.js中配置才能使用。即使你在
assets中新建了images，css等文件夹，构建后，dist目录的assets并不会同步新建同名文件夹分别存放，除非改写配置文件
三、网站的ico图标放置问题
做好的favicon.ico图标直接放置在public目录下，然后在根目录下的index.html中引入路径，写法如下：
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
构建时，它会自动将其放到项目根目录文件夹中（与index.html同级）。
四、总结
如果图片不需要被处理，比如网站的结构用图，如logo图片，则放public中，否则如内容图片或者需要被构建为base64的小图标可以放放assets中
如果你在web前端开发、面试、前端学习路线有困难可以加我V：imqdcnn。免费答疑，行业深潜多年的技术牛人帮你解决bug。
祝你能成为一名优秀的WEB前端开发工程师！