关于vite的静态资源放置路径与打包问题：到底是放public下还是放assets下

一、根目录下的public目录

该目录为纯静态文件，图片等放该目录后，打包构建时，vite不会做任何处理，构建为dist目录后，直接复制到images文件夹下。

那么在组件中要这样写才能正确引用这些资源：

html:
<img src="/images/slogo.png" alt="贵阳仲裁委" 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="贵阳仲裁委" 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前端开发工程师！