vue中給路徑起別名的實現(xiàn)方法

更新時間：2022年03月11日 11:15:27 作者：小碼哥呀

本文主要介紹了vue中給路徑起別名的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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、導(dǎo)入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

頁面正常訪問，圖片能夠正常顯示

在這里插入圖片描述

到此這篇關(guān)于vue中給路徑起別名的實現(xiàn)方法的文章就介紹到這了,更多相關(guān)vue 路徑起別名內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

詳解Element-UI中上傳的文件前端處理
這篇文章主要介紹了詳解Element-UI中上傳的文件前端處理，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
Vue transx組件切換動畫庫示例詳解
這篇文章主要為大家介紹了Vue transx組件切換動畫庫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
3分鐘讀懂移動端rem使用方法(推薦)
這篇文章主要介紹了rem使用方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
vue實現(xiàn)滑塊拖拽校驗功能的全過程
vue驗證滑塊功能,在生活中很多地方都可以見到,使用起來非常方便,這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)滑塊拖拽校驗功能的相關(guān)資料,需要的朋友可以參考下
2021-08-08
vite2.0+vue3移動端項目實戰(zhàn)詳解
這篇文章主要介紹了vite2.0+vue3移動端項目實戰(zhàn)詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
vue+rem自定義輪播圖效果
這篇文章主要為大家詳細介紹了vue+rem自定義輪播圖效果，手指觸摸左滑和右滑，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
Vue中常用的rules校驗規(guī)則的實現(xiàn)
在vue開發(fā)中,難免遇到各種表單校驗,本文主要介紹了Vue中常用的rules校驗規(guī)則的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下
2023-10-10
vue實現(xiàn)給div綁定keyup的enter事件
這篇文章主要介紹了vue實現(xiàn)給div綁定keyup的enter事件，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
Vue Computed中g(shù)et和set的用法及Computed與watch的區(qū)別
這篇文章主要介紹了Vue Computed中g(shù)et和set的用法及Computed與watch的區(qū)別,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
vue3中reactive和ref的實現(xiàn)與區(qū)別詳解
reactive和ref都是vue3實現(xiàn)響應(yīng)式系統(tǒng)的api,他們是如何實現(xiàn)響應(yīng)式的呢,reactive和ref又有什么區(qū)別呢,下面小編就來和大家詳細講講,希望對大家有所幫助
2023-10-10