Vue中的~（静态资源处理）
2024-09-10 08:23:15
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
最新文章
- 【流量劫持】SSLStrip 终极版 —— location 瞒天过海
- c——I/O Multiplexing笔记
- SublimeText2 快捷键一览
- SQL SERVER事务处理
- Acdream1217 Cracking' RSA(高斯消元)
- AspNetCore-MVC实战系列（二）之通过绑定邮箱找回密码
- linux下查询进程占用的内存方法总结
- js 内置对象参考 （Array，String, Math, Data, Number）
- MVC实战之排球计分（六）—— 使用EF框架，创建Controller，生成数据库。
- git 更新远程分支列表
- rest api方式实现对文档库的管理
- [Oracle]如何查看 10046 trace 中的 tim= ... 的具体时刻
- windows服务器开启openssl
- μCOS-II系统之事件(event)的使用规则及Semaphore实例
- centos配置ssh免密码登录后，仍提示输入密码
- SQL Server XML变量转为Json文本
- [CF]Cycling City
- sql 死锁
- UICollectionView的简单认识和简单实用
- [LeetCode] Sort List 排序 sort