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 相关文章推荐
javascript 处理事件绑定的一些兼容写法
Dec 24 Javascript
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 Javascript
javascript获取元素偏移量的方法有哪些
Jun 24 Javascript
javascript中clone对象详解
Dec 03 Javascript
Bootstrap每天必学之模态框(Modal)插件
Apr 26 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
JS隐藏号码中间4位代码实例
Apr 09 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
PHP编译安装时常见错误解决办法
2015/05/28 PHP
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
Python创建文件和追加文件内容实例
2014/10/21 Python
利用Python获取操作系统信息实例
2016/09/02 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
用Python逐行分析文件方法
2019/01/28 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
高校教师思想汇报
2014/01/11 职场文书
财务学生的职业生涯发展
2014/02/11 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
无私奉献演讲稿
2014/09/04 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
法律意见书范本
2015/06/04 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
mysql知识点整理
2021/04/05 MySQL
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
Selenium浏览器自动化如何上传文件
2022/04/06 Python