详解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 相关文章推荐
JavaScript的面向对象(一)
Nov 09 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 Javascript
JavaScript 空间坐标的使用
Aug 19 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
微信小程序实现点击图片旋转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
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
微信小程序 http请求的session管理
2017/06/07 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
ES6 十大特性简介
2020/12/09 Javascript
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
window下eclipse安装python插件教程
2017/04/24 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
python super函数使用方法详解
2020/02/14 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
酒店出纳岗位职责
2013/12/29 职场文书
高二生物教学反思
2014/01/27 职场文书
优秀信贷员先进事迹
2014/01/31 职场文书
施工安全标语
2014/06/07 职场文书
工作经验交流材料
2014/12/30 职场文书
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android