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、導入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中給路徑起別名的實現(xiàn)方法的文章就介紹到這了,更多相關vue 路徑起別名內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
一文帶你深入理解Vue3中Composition API的使用
Composition API 是 Vue 3 中的一項強大功能,它改進了代碼組織和重用,使得構建組件更加靈活和可維護,本文我們將深入探討 Composition API 的各個方面,希望對大家有所幫助2023-10-10
本篇文章主要介紹了詳解基于vue-cli優(yōu)化的webpack配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
Vue.js 通過jQuery ajax獲取數(shù)據實現(xiàn)更新后重新渲染頁面的方法
今天小編小編就為大家分享一篇Vue.js 通過jQuery ajax獲取數(shù)據實現(xiàn)更新后重新渲染頁面的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue.js分頁組件實現(xiàn)：diVuePagination的使用詳解
這篇文章主要介紹了Vue.js分頁組件實現(xiàn)：diVuePagination的使用詳解,需要的朋友可以參考下2018-01-01
這篇文章主要為大家介紹了vue實現(xiàn)列表展示的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
正則表達式是由一些特定的字符組成,代表一個規(guī)則,可以用來檢驗數(shù)據格式是否合法,也可以在一段文本中查找滿足要求的內容,這篇文章主要給大家介紹了關于VUE正則表達式用法的相關資料,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue移動端如何解決click事件延遲，封裝tap等事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要給大家介紹了關于vue使用dagre-d3畫流程圖的完整代碼,dagre-d3.js是一個用于在Vue.js框架中實現(xiàn)DAG（有向無環(huán)圖）可視化的庫,它結合了vue.js、dagre和d3.js這三個庫的功能,需要的朋友可以參考下2024-02-02
Vue Element前端應用開發(fā)之常規(guī)的JS處理函數(shù)
在我們使用Vue Element處理界面的時候，往往碰到需要利用JS集合處理的各種方法，如Filter、Map、reduce等方法，也可以涉及到一些對象屬性賦值等常規(guī)的處理或者遞歸的處理方法，本篇隨筆列出一些在VUE+Element 前端開發(fā)中經常碰到的JS處理場景，供參考學習。2021-05-05
vue.js給動態(tài)綁定的radio列表做批量編輯的方法
下面小編就為大家分享一篇vue.js給動態(tài)綁定的radio列表做批量編輯的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02