vue中给路径起别名的实现方法

更新时间：2022年03月11日 11:15:27 作者：小码哥呀

本文主要介绍了vue中给路径起别名的实现方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

1、在webpack.base.conf.js配置文件中给路径起别名

在这里插入图片描述

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    '@': resolve('src'),
    'assets': resolve('src/assets'),
    'components': resolve('src/components'),
    'views': resolve('src/views'),
  }
},

2、在vue文件中使用别名

2.1、在import中使用@

在这里插入图片描述

 /* 1、导入T组件 */
  import TabBar from '@/components/tabbar/TabBar'
  import TabBarItem from '@/components/tabbar/TabBarItem'

2.2、在dom中使用别名（~）

在这里插入图片描述

<tab-bar-item path="/home" activeColor="deeppink">
  <img slot="item-icon" src="~assets/img/tabbar/home.svg" alt="">
  <img slot="item-icon-active" src="~assets/img/tabbar/home_active.svg" alt="">
  <div slot="item-text">首页</div>
</tab-bar-item>

3、修改了vue的配置文件，要重新npm run dev

页面正常访问，图片能够正常显示

在这里插入图片描述

到此这篇关于vue中给路径起别名的实现方法的文章就介绍到这了,更多相关vue 路径起别名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解Element-UI中上传的文件前端处理
这篇文章主要介绍了详解Element-UI中上传的文件前端处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
Vue transx组件切换动画库示例详解
这篇文章主要为大家介绍了Vue transx组件切换动画库示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
3分钟读懂移动端rem使用方法(推荐)
这篇文章主要介绍了rem使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
vue实现滑块拖拽校验功能的全过程
vue验证滑块功能,在生活中很多地方都可以见到,使用起来非常方便,这篇文章主要给大家介绍了关于vue实现滑块拖拽校验功能的相关资料,需要的朋友可以参考下
2021-08-08
vite2.0+vue3移动端项目实战详解
这篇文章主要介绍了vite2.0+vue3移动端项目实战详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
vue+rem自定义轮播图效果
这篇文章主要为大家详细介绍了vue+rem自定义轮播图效果，手指触摸左滑和右滑，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
Vue中常用的rules校验规则的实现
在vue开发中,难免遇到各种表单校验,本文主要介绍了Vue中常用的rules校验规则的实现,具有一定的参考价值,感兴趣的可以了解一下
2023-10-10
vue实现给div绑定keyup的enter事件
这篇文章主要介绍了vue实现给div绑定keyup的enter事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue Computed中get和set的用法及Computed与watch的区别
这篇文章主要介绍了Vue Computed中get和set的用法及Computed与watch的区别,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
vue3中reactive和ref的实现与区别详解
reactive和ref都是vue3实现响应式系统的api,他们是如何实现响应式的呢,reactive和ref又有什么区别呢,下面小编就来和大家详细讲讲,希望对大家有所帮助
2023-10-10