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 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
5款Javascript颜色选择器
Oct 25 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
Jun 18 Javascript
AngularJS实现网站换肤实例
Feb 19 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 Javascript
JS监听Esc 键触发事键
Apr 14 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实现简单洗牌算法
2013/06/18 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
python 随机数生成的代码的详细分析
2011/05/15 Python
python字符串编码识别模块chardet简单应用
2015/06/15 Python
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
python基于http下载视频或音频
2018/06/20 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
python批量爬取下载抖音视频
2019/06/17 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
struct和class的区别
2015/11/20 面试题
怎样有效的进行自我评价
2013/10/06 职场文书
公司寄语大全
2014/04/10 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
大连导游词
2015/02/12 职场文书
拉贝日记观后感
2015/06/05 职场文书
期中考试后的感想
2015/08/07 职场文书
初中政治教学反思
2016/02/23 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android