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,所以你能够使用相对/模块路径时不需要担心部署的问题。

资源处理规则

  • 相对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 是不会被处理的。

参考:https://athena0304.gitbooks.io/vue-template-webpack-cn/content/static.html

Vue中的~(静态资源处理)的更多相关文章

  1. Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结

    上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 问题总结 作者:轻舞肥羊 日期:2012-11-26 http://www.blogjava.net/fi ...

  2. Spring Boot 中的静态资源到底要放在哪里?

    当我们使用 SpringMVC 框架时,静态资源会被拦截,需要添加额外配置,之前老有小伙伴在微信上问松哥Spring Boot 中的静态资源加载问题:"松哥,我的HTML页面好像没有样式?& ...

  3. 在Salesforce中使用静态资源

    静态资源 静态资源是Salesforce中默认的一种数据类型,用户可以上传各种文件,比如zip文件.jpg文件.css文件.图像文件等. 在Visualforce页面.Lightning框架的开发过程 ...

  4. SpringBoot使用thymeleaf的方式引用static中的静态资源

    当我们在开发网站时为了快速完成,避免不了使用第三方的框架文件.这样我们就得引用框架中的各种资源文件.那么,在springboot中通过 thymeleaf如何在html中使用static文件夹下的静态 ...

  5. idea中springboot静态资源及页面跳转问题

    1,静态资源放在resources/static下,html页面放在resources/templates下 2,在html中引入静态资源时,不用带static(对于路径来说是透明的) 3, 配置ht ...

  6. Spring Boot中的静态资源文件

    Spring Boot中的静态资源文件 1.SSM中的配置 2.Spring Boot 中的配置 2.1 整体规划 2.2 源码解读 2.3 自定义配置 2.3.1 application.prope ...

  7. vue-cli 中的静态资源处理

    你会注意到在项目结构上我们有静态资源两个目录:src/assets 和 static/.它们之间有什么区别? 1. 通过webpack处理的资源 要回答这个问题,我们首先需要了解webpack如何处理 ...

  8. webpack中的静态资源处理

    你可能已经注意到,在我们的项目结构里,有两个静态文件的路径,分别是:src/assets 和 static/.那这两个到底有什么区别呢? Webpacked 资源 为了回答这个问题,我们首先需要理解w ...

  9. Vue中的静态资源管理(src下的assets和static文件夹的区别)

    ### 你可能注意到了我们的静态资源共有两个目录src/assets和static/,你们它们之间有怎样的区别呢? 资源打包 为了回答这个问题,我们需要了解webpack是如何处理静态资源的. 在所有 ...

  10. Spring MVC中处理静态资源的多种方法

    处理静态资源,我想这可能是框架搭建完成之后Web开发的”头等大事“了. 因为一个网站的显示肯定会依赖各种资源:脚本.图片等,那么问题来了,如何在页面中请求这些静态资源呢? 还记得Spring MVC中 ...

随机推荐

  1. kong api可视化管理工具konga安装

    说明:官网推荐: kong-dashboard,但对比界面高端程度和友好度,更推荐konga.[一个坑]kong版本问题:我在安装时目前kong最新版本已经到1.0.0, 对于konga和kong-d ...

  2. Chapter07 链表(下):如何轻松学出正确的链表代码?

    技巧一:理解指针或引用的含义 技巧二:指针丢失和内存泄漏 技巧三:利用哨兵简化实现难度 技巧四:重点留意边界条件处理 如果链表未空时,代码是否能够正常运行 如果链表只包含一个节点时,代码能否正常运行 ...

  3. alpha阶段发布博客

    我们的Phylab网站发布了! Alpha版本功能 模块 功能 注册界面 根据邮箱,学号等信息注册新用户 登陆界面 根据账号信息登陆 用户界面 查看,修改用户信息和签名 实验报告界面 查看各个实验预习 ...

  4. Java学习笔记——鸵鸟学习记(一)

    1. 变量 1.1 使用变量 a, 变量三要素:名字 值 类型 b, 变量命名 英文字母,数字,下划线,但不能数字开头 并不是英文单词,用拼音也可以 随便写也可以,但可读性差 区分大小写(Y与y是不同 ...

  5. matlab-逻辑回归二分类(Logistic Regression)

    逻辑回归二分类 今天尝试写了一下逻辑回归分类,把代码分享给大家,至于原理的的话请戳这里 https://blog.csdn.net/laobai1015/article/details/7811321 ...

  6. LocalVariableTable之 Slot 复用

    LocalVariableTable中的 Slot, 是存在复用现象的,这个我早就知道,但是,不太清楚是如何复用的. Java语言规范与JVM规范都没有对Java语言具体要如何使用JVM的局部变量sl ...

  7. Mysql将查询结果合并为一列

    利用函数:group_concat(),实现一个ID对应多个名称时,原本为多行数据,把名称合并成一行. 完整的语法如下: group_concat([DISTINCT] 要连接的字段 [Order B ...

  8. HTML5 关于本地操作文件的方法

    由于传统 b/s 开发出于安全性的考虑,浏览器对于本地文件的操作权限几乎没有,用户想要操作一个文件基本都是采用先上传到服务器, 再回显给浏览器供用户编辑,裁剪等的方法,这种方式虽然可行,但其对于服务器 ...

  9. FICO-初级会计学

    初级会计学 https://wenku.baidu.com/view/39257b1a59eef8c75fbfb348.html?from=search https://wenku.baidu.com ...

  10. elk报警监控之sentinl 钉钉+邮件告警

    注:我的elk sentinl版本都是6.5.1 前期知识 es的查询语法.es watcher使用方法. https://www.cnblogs.com/pilihaotian/p/5830754. ...