一、根目录下的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前端开发工程师!