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 相关文章推荐
JQuery小知识
Oct 15 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
js自定义回调函数
Dec 13 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
electron-vue开发环境内存泄漏问题汇总
Oct 10 Javascript
基于JS实现快速读取TXT文件
Aug 25 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
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
paypal即时到账php实现代码
2010/11/28 PHP
学习php开源项目的源码指南
2014/12/21 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
Javascript typeof 用法
2008/12/28 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
深入解答关于Python的11道基本面试题
2017/04/01 Python
python操作oracle的完整教程分享
2018/01/30 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
法学专业本科生自荐信范文
2013/12/17 职场文书
质量保证书范本
2014/04/29 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
2014年仓库工作总结
2014/11/20 职场文书
校园环境卫生倡议书
2015/04/29 职场文书