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 相关文章推荐
一个原生的用户等级的进度条
Jul 03 Javascript
Jquery 表格合并的问题分享
Sep 17 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
jquery常用的12个小功能
Jul 22 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
vue.js自定义组件directives的实例代码
Nov 09 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
通过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中遍历stdclass object的实现代码
2011/06/09 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
php调用c接口无错版介绍
2014/03/11 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
gulp解决跨域的配置文件问题
2017/06/08 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
Python with的用法
2014/08/22 Python
Python while 循环使用的简单实例
2016/06/08 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
如何使用python写截屏小工具
2020/09/29 Python
大学毕业生工作的自我评价
2013/10/01 职场文书
优秀应届毕业生自荐信
2013/11/16 职场文书
《故乡》教学反思
2014/04/10 职场文书
工作经历证明书范文
2014/11/02 职场文书
高二语文教学反思
2016/02/16 职场文书
Java 在生活中的 10 大应用
2021/11/02 Java/Android