详解Vue-cli中的静态资源管理(src/assets和static/的区别)


Posted in Javascript onJune 19, 2018

你可能注意到了我们的静态资源共有两个目录src/assets和static/,你们它们之间有怎样的区别呢?

资源打包

为了回答这个问题,我们需要了解webpack是如何处理静态资源的。在所有的*.vue文件中你所有的templates 和CSS 都被vue-html-loader 和css-loader 查询资源的URLs解析. 比如说, 在 img src=”./logo.png” 和background: url(./logo.png) 中./logo.png是一个相对资源路径,并且会被Webpack视为一个模块依赖来解析。

因为./logo.png并非一个Javascript,当将它作为模块依赖对待时,我们需要用url-loader和file-loader去处理它。这种公式化处理早已经为你配置了loader,所以你基本上可以获得诸如文件名指纹和有条件的内嵌base64,因此你能够使用相对/模块路径而不必担心部署问题。

自从这些资源可以在build期间被内联/复制/重命名,它们本质上来讲是你资源代码的一部分。这就是为什么它们被推荐用于延源资源替换Webpack-processed的内部/src资源。事实上,你甚至不必将它们放进/src/assets:你可以基于模块/组件去组织它们并使用,你可以将每一个组件放进他们自己的文件夹,随着它的静态文件正确的紧挨着它。

资源决定规则

  1. 相对URLs, 例如 ./assets/logo.png 将会被解释为一个模块依赖. 它们将会被替换为基于你Webpack输出配置自动生成的 URL
  2. 无前缀URLs, 例如. assets/logo.png 将会被像相对URLs一样处理并将被转化为 ./assets/logo.png.
  3. 带~前缀的URLs 将会被看做模块请求, 类似于请求(‘some-module/image.png'). 如果你想改变Webpack的模块解决配置你需要使用这个前缀 。例如,你需要处理资源的别名,你需要使用 ~assets/logo.png去确保这个别名时受到重视的.
  4. 特权相对URLs, 例如 /assets/logo.png 是完全不作处理的.

在Javascript中获取资源路径

为了使Webpack可以正确返回资源路径, 你需要使用 require(‘./relative/path/to/file.jpg'), 它将会被file-loader处理 and returns并返回处理过的URL. 例如:

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

注意上例将会包含每个在最后一次build中的./bgs/ 下的图片。 这是由于 Webpack 无法推测它们哪个会在运行时被使用, 因此会包含所有图片.

“真正”的静态资源

对比而言, static/ 中的文件是完全不被Webpack处理的,它们被以相同的文件名直接被复制进最终目标as-is.你务必要使用绝对路径去引用它们.这是由config.js加入build.assetspublicpath和build.assetssubdirectory确定。

如下是一个含默认值得例子:

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

任何在 static/ 中的文件都需要被使用绝对路径 /static/[filename]来引用. 如果你改变assetSubDirectory 为assets, 那么这些 URLs将需要被替换为 /assets/[filename].

译自:http://vuejs-templates.github.io/webpack/static.html

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

Javascript 相关文章推荐
javascript 有用的脚本函数
May 07 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
js模糊查询实例分享
Dec 26 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
Javascript实现打鼓效果
Jan 29 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 #Javascript
vue异步加载高德地图的实现
Jun 19 #Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 #Javascript
JS正则表达式常见用法实例详解
Jun 19 #Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 #Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 #Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 #Javascript
You might like
php中的观察者模式
2010/03/24 PHP
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
python实现定时播放mp3
2015/03/29 Python
举例讲解Python中is和id的用法
2015/04/03 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
python根据时间获取周数代码实例
2019/09/30 Python
wxPython实现列表增删改查功能
2019/11/19 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
python如何导入依赖包
2020/07/13 Python
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
黄河象教学反思
2014/02/10 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
《恐龙》教学反思
2014/04/27 职场文书
政风行风评议心得体会
2014/10/21 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
欢迎词范文
2015/01/27 职场文书
法学专业求职信范文
2015/03/19 职场文书
正规欠条模板
2015/07/03 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
导游词之四川武侯祠
2019/10/21 职场文书