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 相关文章推荐
js右键菜单效果代码
Jul 21 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
Jun 01 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
jquery 判断selection range 是否在容器中的简单实例
Aug 02 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
BootStrap的两种模态框方式
May 10 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
vue router 跳转时打开新页面的示例方法
Jul 28 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 Javascript
详解Vite的新体验
Feb 22 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开发中四种查询返回结果分析
2011/01/02 PHP
php存储过程调用实例代码
2013/02/03 PHP
PHP输出XML到页面的3种方法详解
2013/06/06 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
php获取文章上一页与下一页的方法
2014/12/01 PHP
浅谈php提交form表单
2015/07/01 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
js脚本实现数据去重
2014/11/27 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
vue中倒计时组件的实例代码
2018/07/06 Javascript
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
TensorFlow实现创建分类器
2018/02/06 Python
python 实现逻辑回归
2020/12/30 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
暑期培训随笔感言
2014/03/10 职场文书
客户答谢会活动方案
2014/08/31 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
思想品德课教学反思
2016/02/24 职场文书
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技
基于Python实现西西成语接龙小助手
2022/08/05 Golang