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-ui中自动完成实现方法
Jun 10 Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
layui清除radio的选中状态实例
Nov 14 Javascript
vue+element table表格实现动态列筛选的示例代码
Jan 14 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来写记数器(详细介绍)
2006/10/09 PHP
php curl基本操作详解
2013/07/23 PHP
php数组转换js数组操作及json_encode的用法详解
2013/10/26 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
PHP如何将XML转成数组
2016/04/04 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
python 查找字符串是否存在实例详解
2017/01/20 Python
Python实现字符串逆序输出功能示例
2017/06/24 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
python实现粒子群算法
2020/10/15 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
python tkinter实现连连看游戏
2020/11/16 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
Java的基础面试题附答案
2016/01/10 面试题
一套SQL笔试题
2016/08/14 面试题
Linux操作面试题
2012/05/16 面试题
运动会入场解说词300字
2014/01/25 职场文书
诉讼授权委托书
2014/10/15 职场文书
河童之夏观后感
2015/06/11 职场文书
Python中三种花式打印的示例详解
2022/03/19 Python
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript