vue中assete和public目录的区别及说明
更新时间：2026年07月09日 08:39:57 作者：小迷糊MJ
想知道为什么字体文件放在src/assets里会报错,而放在public就能正常运行？本指南揭晓assets和public目录的核心区别,帮你避免静态资源加载陷阱,掌握路径设置与webpack处理规则,立即解决字体、图片文件找不到的烦恼
assete和public目录的区别
当字体文件放在src目录下的assete中时，控制台一直报找不到字体文件的错误，
如下图：
解决方案
将字体文件放在public目录下即可正常访问
总结
assets和public两个目录都可以用来放置静态资源，通常将外部的第三方的文件放在public中，自己的文件放在assets中。
1、public文件夹
（1）路径设置时无需添加 /public，默认加载 public 文件夹下的文件
（2）public文件夹下的资源会直接编译，而不经过 webpack
2、assets文件夹
（1）assets目录中的文件会被webpack处理解析为模块依赖
（2）大多数用来存放js、css等
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Ant Design Vue table中列超长显示...并加提示语的实例
这篇文章主要介绍了Ant Design Vue table中列超长显示...并加提示语的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用的原理解析
作者通过二次封装Element-Plus的el-dialog组件,实现动态显示与数据传递功能,提升项目灵活性和代码复用性,适用于用户编辑、文件上传确认、权限管理等多场景需求,本文给大家介绍从0到1解锁Element-Plus组件二次封装El-Dialog动态调用的原理解析,感兴趣的朋友一起看看吧2025-07-07
这篇文章主要给大家介绍了关于Vue如何在CSS中使用data定义的数据的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了vue微信分享链接添加动态参数的实现方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-04-04
el-form表单el-form-item验证规则里prop一次验证两个或多个值问题
这篇文章主要介绍了el-form表单el-form-item验证规则里prop一次验证两个或多个值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要为大家详细介绍了vue项目实现添加图片裁剪组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了Vue项目中Api的组织和返回数据处理的操作，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-11
Vue3+echarts5踩坑以及resize方法报错的解决
这篇文章主要介绍了Vue3+echarts5踩坑以及resize方法报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
vue2之响应式双向绑定,在对象或数组新增属性页面无响应的情况
这篇文章主要介绍了vue2之响应式双向绑定,在对象或数组新增属性页面无响应的情况及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
本篇文章主要介绍了vue指令以及dom操作详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
最新评论