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


Posted in Javascript onApril 08, 2018

资源文件处理

在我们的项目结构里,有两个资源文件的路径,分别是:src/assets 和 static/。那这两个到底有什么区别呢?

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, e.g. ./assets/logo.png 将会被解释成一个模块依赖。它们会被一个基于你的Webpack输出配置自动生成的URL替代。没有前缀的URL, e.g. assets/logo.png 将会被看成相对URL,并且转换成./assets/logo.png

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

在 Javascript中获取资源路径

为了能让Webpack返回正确的资源路径,你需要使用require(‘./relative/path/to/file.jpg'),由file-loader进行解析,然后返回处理过的URL。例如:

computed: {
 background () {
  return require('./bgs/' + this.id + '.jpg')
 }
}

注意上面的例子,在最终的构建时将会包含./bgs/路径下的所有图片 这是因为Webpack不能猜出来在运行时会用到其中的哪个,所以会包含所有的。

“真实的” 静态资源

作为对比,在static/下的文件都不会被Webpack处理:它们使用相同的文件名,直接拷贝到最终的路径。你必须使用绝对路径来引用这些文件,取决于在config.js里面加入的build.assetsPublicPath 和 build.assetsSubDirectory。

举个例子,下面的默认值是:

// config/index.js
module.exports = {
 // ...
 build: {
  assetsPublicPath: '/',
  assetsSubDirectory: 'static'
 }
}

所有放在 static/目录下的文件都应该是使用绝对URL/static/[filename]引用的。如果你将assetSubDirectory的值改成assets, 那么这些URL就会被变成 /assets/[filename]

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

Javascript 相关文章推荐
js 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
JavaScript实现tab栏切换效果
Mar 16 Javascript
Python版实现微信公众号扫码登陆
May 28 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 Javascript
vue实现拖拽交换位置
Apr 07 Vue.js
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 #Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 #Javascript
JS求Number类型数组中最大元素方法
Apr 08 #Javascript
angular2模块和共享模块详解
Apr 08 #Javascript
vue下拉列表功能实例代码
Apr 08 #Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 #Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 #Javascript
You might like
php产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
PHP+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
Yii快速入门经典教程
2015/12/28 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
利用json获取字符出现次数的代码
2012/03/22 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
十条建议帮你提高Python编程效率
2016/02/16 Python
Python实现通讯录功能
2018/02/22 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
《诚实与信任》教学反思
2014/04/10 职场文书
中标通知书
2015/04/17 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
高二化学教学反思
2016/02/22 职场文书
小学记事作文之200字
2019/08/06 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
Golang 并发编程 SingleFlight模式
2022/04/26 Golang
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL