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

文章目录

    • 一、根目录下的`public`目录
    • 二、`src`下的`assets`目录
    • 三、网站的ico图标放置问题
    • 四、总结

一、根目录下的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打包处理,包括压缩、重命名等,其他所有的构建后的JSCSS都会放在dist/assets文件下。

在组件中如何写路径才能引用这些静态资源呢?方法就是像引用其他src下的组件或JS一样的方式,比如:

 <img src="@/assets/images/test.jpg" alt="贵阳仲裁委" width="120" />

@需要在vite.config.js中配置才能使用。

即使你在assets中新建了imagescss等文件夹,构建后,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前端开发工程师!

你可能感兴趣的:(Vuejs,vue.js,vite)