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