vue中给路径起别名

小码哥呀

已于 2022-03-08 19:43:35 修改

阅读量2.1k

点赞数 2

分类专栏： VUE 文章标签： vue.js webpack javascript

于 2022-03-08 19:40:11 首次发布

本文链接：https://blog.csdn.net/qq_46112274/article/details/123361021

版权

VUE 专栏收录该内容

62 篇文章 9 订阅

订阅专栏

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>