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 路径起别名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue transition过渡组件详解
我们现在可以了解一下vue的过渡，vue在插入、更新以及移除DOM元素的时候，提供了很多不同方式过渡的效果，如果在css过渡自动应用class，在过渡钩子函数中使用JavaScript直接操作DOM就可以了
2022-08-08
vue页面如何及时更新页面数据问题
这篇文章主要介绍了vue页面如何及时更新页面数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
基于vue的换肤功能的示例代码
本篇文章主要介绍了基于vue的换肤功能的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
vue中的非父子间的通讯问题简单的实例代码
这篇文章主要介绍了vue中的非父子间的通讯问题简单的实例代码,需要的朋友可以参考下
2017-07-07
Vue实现点击图片放大显示功能
这篇文章主要为大家详细介绍了如何利用Vue实现点击图片放大显示功能，文中的示例代码讲解详细，具有一定的参考价值，感兴趣的可以了解一下
2023-03-03
Vue项目中使用better-scroll实现一个轮播图自动播放功能
better-scroll是一个非常非常强大的第三方库在移动端利用这个库不仅可以实现一个非常类似原生ScrollView的效果也可以实现一个轮播图的效果。这篇文章主要介绍了Vue项目中使用better-scroll实现一个轮播图,需要的朋友可以参考下
2018-12-12
Vuex中实现数据状态查询与更改
今天小编就为大家分享一篇Vuex中实现数据状态查询与更改，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
前端elementUI select选择器实现远程搜索
这篇文章主要为大家介绍了前端使用elementUI select选择器实现远程搜索，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-05-05
vue 全选与反选的实现方法(无Bug 新手看过来)
下面小编就为大家分享一篇vue 全选与反选的实现方法(无Bug 新手看过来)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
element-ui 本地化使用教程详解
这篇文章主要介绍了element-ui 本地化使用教程详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10