详解vue2.0 资源文件assets和static的区别


Posted in Javascript onNovember 27, 2018

Webpacked 资源

我们首先需要理解webpack是怎样处理静态资源的。在*.vue组件中,所有的templates和css都会被vue-html-loader 和 css-loader解析,寻找资源的URL。

举个例子,在<img src="./logo.png">background: url(./logo.png), "./logo.png"中,都是相对资源路径,都会被Webpack解析成模块依赖 。

由于logo.png不是JavaScript,当被看成一个模块依赖的时候,我们需要使用url-loader 和 file-loader进行处理。 该模板已经配置好了这些loaders,所以你能够使用相对/模块路径时不需要担心部署的问题。

由于这些资源可能在构建的时候被内联/复制/重命名, 所以它们从本质上来说是你源码的一部分。这就是为什么我们建议将交由webpack处理的静态资源和其它源文件一样放在/src路径下面。

实际上,你甚至不需要把它们全都放在/src/assets路径下:你可以基于模块/组件的使用来组织文件结构。例如,你可以把每个组件和属于它的静态资源放在它自己的目录下。

资源处理规则

相对URL, ./assets/logo.png 将会被解释成一个模块依赖。它们会被一个基于你的Webpack输出配置自动生成的URL替代。

没有前缀的URL, assets/logo.png 将会被看成相对URL,并且转换成./assets/logo.png

前缀带~的URL 会被当成模块请求, 类似于require('some-module/image.png'). 如果你想要利用Webpack的模块处理配置,就可以使用这个前缀。例如,如果你有一个对于assets的路径解析,你需要使用<img src="~assets/logo.png">来确保解析是对应上的。

相对根目录的URL, /assets/logo.png 是不会被处理的.

测试总结:

1.采用相对路径,程序内部自己编写的样式和图片,一般放在assets文件夹下。

详解vue2.0 资源文件assets和static的区别

top.vue中要引入图片assets/images/home/photo.png,可以这样写img

<img src="../../assets/images/home/photo.png" />

本地dev渲染后,图片路径:(被打包放在静态文件夹static的img下了)

详解vue2.0 资源文件assets和static的区别

build项目后,打开后图片路径:(静态文件夹的相对路径)

详解vue2.0 资源文件assets和static的区别

2.采用webpack中的alias设置路径别名。

详解vue2.0 资源文件assets和static的区别

top.vue中可以这样调用:(图片放在static/images/home文件夹下)

<img src="~images/home/logo.png" />

项目dev后,也会被编译成:

详解vue2.0 资源文件assets和static的区别

个人感觉第一种更直观一些。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
js图片自动切换效果处理代码
May 07 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
JQuery中clone方法复制节点
May 18 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
详解swipe使用及竖屏页面滚动方法
Jun 28 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
深入了解js原型模式
May 30 Javascript
Vue使用Three.js加载glTF模型的方法详解
Jun 14 Javascript
Vant picker 多级联动操作
Nov 02 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 #Javascript
js canvas实现画图、滤镜效果
Nov 27 #Javascript
js canvas画布实现高斯模糊效果
Nov 27 #Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 #Javascript
Vue数据双向绑定的深入探究
Nov 27 #Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 #Javascript
微信小程序实现日历功能
Nov 27 #Javascript
You might like
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
js loading加载效果实现代码
2009/11/24 Javascript
网页中CDATA标记的说明
2010/09/12 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
JS实现小星星特效
2019/12/24 Javascript
sqlalchemy对象转dict的示例
2014/04/22 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
Python学习小技巧总结
2018/06/10 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
迟到检讨书400字
2014/01/13 职场文书
材料员岗位职责
2014/03/13 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
开学典礼校长致辞
2015/07/29 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
python元组打包和解包过程详解
2021/08/02 Python