webpack+vue中使用别名路径引用静态图片地址实例详解
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了webpack+vue中使用别名路径引用静态图片地址实例详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2125字，纯文字阅读大概需要4分钟。
内容图文
webpack 的别名好处大家也都了解, 但是 vue 的模板中, 对图片地址使用别名时总出现问题, 很久时间的时间都没找到解决办法, 一度认为是 webpack 的原因。本文主要介绍了webpack+vue中使用别名路径引用静态图片地址，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望帮助到大家。<template>
<img src="assets/images/logo.jpg" />
</template>
<script>
import 'assets/css/style.css'
</script>
<style>
.logo {
background: url(asset/images/bg.jpg)
}
</style>上面的代码, 你会发现只有引入style.css是成功的, 图片地址和背景图片地址都会解析失败...
经过各种搜索找原因(这时候, 你会发现百度搜索这些技术型的内容, 真是垃圾中的战斗机), 最终还是找到原因了...
vue-html-loader and css-loader translates non-root URLs to relative paths. In order to treat it like a module path, prefix it with ~
就是要在别名前面加一个~
最终代码写成:
意思就是: 告诉加载器它是一个模块，而不是相对路径
注意: 只有在template中的静态文件地址和style中的静态文件地址需要加~, 在script里的, 别名定义成什么就写什么.
到此, 纠结了几个月时间的问题, 终于解决了...
顺便贴下自己使用的别名列表:
相关推荐：
PHP正则获取页面所有图片地址的代码示例
正则表达式处理图片地址、img标签的方法总结分享
JavaScript正则表达式替换字符串中图片地址(img src)的方法
以上就是webpack+vue中使用别名路径引用静态图片地址实例详解的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的webpack+vue中使用别名路径引用静态图片地址实例详解全部内容，希望文章能够帮你解决webpack+vue中使用别名路径引用静态图片地址实例详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。