vue项目中图片选择路径位置static或assets的区别及说明
vue图片选择路径位置static或assets区别
用vuecli的话默认情况下 static 中的文件不会经过 webpack 相关 loader 处理
assets里面的图片是会经过 webpack 的 loader 处理的，而 static 里面的图片是被直接复制到 dist/static 下面的。
一般是把一些小图片放在 assets 里面，这样一些小图片就可以处理成 base64 了，或者全放在 assets 下面都可以。
相同点
assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下。
不相同点
assets中存放的静态资源文件在项目打包时，也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传，所谓打包简单点可以理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器
static中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是static中的资源文件由于没有进行压缩等操作，所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。所以简单点使用建议如下：
将项目中template需要的css文件js文件等都可以放置在assets中，走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfoont.css等文件可以放置在static中，因为这些引入的第三方文件已经经过处理，我们不再需要处理，直接上传。
vue之assets下的图片路径
<el-image :src="require('../assets/logo.png')" class="imgsign" ></el-image>如果想要加载在assets文件下的图片，需使用require（’ …’）的形式，且须使用 :src
:src
static文件下的图片不需要。
vue无法识别require，执行一下命令即可：
npm install @types/node --save-dev
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了Yarn与Lerna管理monorepo的使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了vue构建动态表单的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
众所周知，一个项目在开发、测试与生产环境的各种配置变量是不一样的，但在vue cli 3中通过指令vue create xxx创建的项目取消了默认的 config 和 build 文件夹，这导致刚入手的小伙伴不知道在哪儿配置环境变量，不过官方也提供了相应的配置方法，本文就来介绍一下2021-08-08
这篇文章主要介绍了Vue2.x响应式及简单的示例，应用了简单的源代码进行讲解，感兴趣的小伙伴可以参考一下，希望可以帮助到你2021-08-08
这篇文章主要介绍了Vue如何引入全局过滤器问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了vue组件的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要给大家介绍了关于Vue中使用icon的几种常用方法,icon图标的使用 Vue是现在前端最流行的框架之一,作为前端开发人员应该要熟练的掌握它,需要的朋友可以参考下2023-07-07
Vue3中的动态路由是一种高级功能,它允许你在URL中包含变量,这些变量可以在组件内部通过$route.params对象访问,动态路由通常用于构建可配置性强、更具灵活性的应用,本文详细介绍了如何在vue3中实现动态路由,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了vue 使用 echarts 绘制中国地图,内容包括插入echarts所需模块及完整的代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-01-01
今天小编就为大家分享一篇Vue引用Swiper4插件无法重写分页器样式的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论