webpack+vue中使用别名路径引用静态图片地址


Posted in Javascript onNovember 20, 2017

webpack 的别名好处大家也都了解, 但是 vue 的模板中, 对图片地址使用别名时总出现问题, 很久时间的时间都没找到解决办法, 一度认为是 webpack 的原因...

alias: {
 'src': path.resolve(__dirname, '../src'),
 'assets': path.resolve(__dirname, '../src/assets'),
 'components': path.resolve(__dirname, '../src/components')
}
<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 ~

就是要在别名前面加一个~

最终代码写成:

alias: {
 'src': path.resolve(__dirname, '../src'),
 'assets': path.resolve(__dirname, '../src/assets'),
 'components': path.resolve(__dirname, '../src/components')
}
<template>
 <img src="~assets/images/logo.jpg" />
</template>
<script>
import 'assets/css/style.css'
</script>
<style>
.logo {
 background: url(~asset/images/bg.jpg)
}
</style>

意思就是: 告诉加载器它是一个模块,而不是相对路径

注意: 只有在template中的静态文件地址和style中的静态文件地址需要加~, 在script里的, 别名定义成什么就写什么.
到此, 纠结了几个月时间的问题, 终于解决了...

顺便贴下自己使用的别名列表:

alias: {
  'assets': path.resolve(__dirname, '../src/assets'),
  'src': path.resolve(__dirname, '../src'),
  '~api': path.resolve(__dirname, '../src/api'),
  '~components': path.resolve(__dirname, '../src/components'),
  '~pages': path.resolve(__dirname, '../src/pages'),
  '~router': path.resolve(__dirname, '../src/router'),
  '~store': path.resolve(__dirname, '../src/store'),
  '~utils': path.resolve(__dirname, '../src/utils')
}

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

Javascript 相关文章推荐
模拟select的代码
Oct 19 Javascript
js中数组Array的一些常用方法总结
Aug 12 Javascript
angularjs实现与服务器交互分享
Jun 24 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
socket在egg中的使用实例代码详解
May 30 Javascript
Vue中的transition封装组件的实现方法
Aug 13 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
vue3.0 上手体验
Sep 21 Javascript
laydate日历控件使用方法详解
Nov 20 #Javascript
JavaScript框架Angular和React深度对比
Nov 20 #Javascript
如何选择适合你的JavaScript框架
Nov 20 #Javascript
JavaScript内存泄漏的处理方式
Nov 20 #Javascript
加载 vue 远程代码的组件实例详解
Nov 20 #Javascript
jquery中有哪些api jQuery主要API
Nov 20 #jQuery
详解如何将 Vue-cli 改造成支持多页面的 history 模式
Nov 20 #Javascript
You might like
全国FM电台频率大全 - 25 云南省
2020/03/11 无线电
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
Yii2如何批量添加数据
2016/05/17 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
netbeans7安装python插件的方法图解
2013/12/24 Python
Python的Flask框架与数据库连接的教程
2015/04/20 Python
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
django用户登录验证的完整示例代码
2019/07/21 Python
pymysql 开启调试模式的实现
2019/09/24 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
美国购物网站:Clickhere2shop
2021/01/28 全球购物
药物学专业学生的自我评价
2013/10/27 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
会议室管理制度范本
2015/08/06 职场文书
python爬虫之selenium库的安装及使用教程
2021/05/23 Python
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python