详解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插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
node.js中的fs.realpath方法使用说明
Dec 16 Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
Bootstrap Table使用整理(二)
Jun 09 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
May 16 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 Javascript
Vue左滑组件slider使用详解
Aug 21 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 实现从数据库导出到.csv文件方法
2017/07/06 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
python根据url地址下载小文件的实例
2018/12/18 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
python IDLE添加行号显示教程
2020/04/25 Python
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
Laravel中Kafka的使用详解
2021/03/24 PHP
水利水电专业自荐信
2014/07/08 职场文书
治庸问责心得体会
2014/09/12 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
创业计划书之面包店
2019/09/12 职场文书