详解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 相关文章推荐
在jquery中处理带有命名空间的XML数据
Jun 13 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
vue请求数据的三种方式
Mar 04 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
php4的session功能评述(三)
2006/10/09 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
iview实现图片上传功能
2020/06/29 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
python中的随机函数小结
2018/01/27 Python
代码详解django中数据库设置
2019/01/28 Python
python支付宝支付示例详解
2019/08/22 Python
Python几种常见算法汇总
2020/06/02 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
Linux Interview Questions For software testers
2012/06/02 面试题
教师年终个人自我评价
2013/10/04 职场文书
创业计划书撰写原则
2014/01/25 职场文书
大学生校园创业计划书
2014/02/08 职场文书
运动会加油稿20字
2014/11/15 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
用JS创建一个录屏功能
2021/11/11 Javascript
Oracle中日期的使用方法实例
2022/07/07 Oracle