Vue中使用webpack別名的方法實(shí)例詳解
在工作中，我們經(jīng)常會(huì)寫出這種代碼：
import MHeader from '../../components/m-header/m-header' @import "../../common/stylus/variable" @import "../../common/stylus/mixin"
即，需要引入公共文件，但是公共文件的文件路徑里當(dāng)前文件很遠(yuǎn)，那么就會(huì)形成上面示例中的那種路徑很長的情況。
而因?yàn)槲募夸浭羌s定俗成的，不可輕易更改，無法修改相對路徑。那么該怎么辦呢？
大家都知道，Vue中的js可以通過配置webpack別名（alias）來避免一長串的路徑引用，即：
// target
import MHeader from 'components/m-header/m-header'
//webpack.base.conf.js
alias: {
'@': resolve('src'),
'common': resolve('src/common'),
'components': resolve('src/components')
}
但是，如果直接把這種方法用在css中，則會(huì)報(bào)錯(cuò)：
@import "common/stylus/variable" // error @import "common/stylus/mixin" // error
其實(shí)，這種方法沒有錯(cuò)，只不過webpack對css的處理不同于js。
在js中，webpack對路徑進(jìn)行處理時(shí)，自動(dòng)將沒有路徑標(biāo)識(shí)（/ ，./，../）的第一個(gè)文件夾名當(dāng)做webpack別名處理。如，第一個(gè)文件夾名為components，那么webpack會(huì)自動(dòng)在alias中搜索有沒有對應(yīng)的別名，如果有，則直接替換路徑；沒有則報(bào)錯(cuò)。
在css中，webpack正常情況下，不會(huì)對路徑進(jìn)行處理。如果你想讓webpack對路徑進(jìn)行處理，那么，可以在路徑前標(biāo)識(shí)~，如下：
@import "~common/stylus/variable" @import "~common/stylus/mixin"
相當(dāng)于通過添加~表示common是webpack別名而不是表示一個(gè)文件夾名。
正確使用webapck別名可以大大縮短引入文件的時(shí)間。
總結(jié)
以上所述是小編給大家介紹的Vue中使用webpack別名的方法實(shí)例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
解決vue2中使用elementUi打包報(bào)錯(cuò)的問題
這篇文章主要介紹了解決vue2中使用elementUi打包報(bào)錯(cuò)的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue3封裝AES(CryptoJS)前端加密解密通信代碼實(shí)現(xiàn)
防止數(shù)據(jù)被爬取,前后端傳參接收參數(shù)需要加密處理,使用AES加密,這篇文章主要給大家介紹了關(guān)于vue3封裝AES(CryptoJS)前端加密解密通信代碼實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2023-12-12
Vue中通過屬性綁定為元素綁定style行內(nèi)樣式的實(shí)例代碼
這篇文章主要介紹了Vue中通過屬性綁定為元素綁定style行內(nèi)樣式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
vue3中使用props和emits并指定其類型與默認(rèn)值
props是Vue3中的一個(gè)重要概念,它允許我們將數(shù)據(jù)從父組件傳遞到子組件,下面這篇文章主要給大家介紹了關(guān)于vue3中使用props和emits并指定其類型與默認(rèn)值的相關(guān)資料,需要的朋友可以參考下2023-04-04
如何利用vue-cli監(jiān)測webpack打包與啟動(dòng)時(shí)長
這篇文章主要給大家介紹了關(guān)于如何利用vue-cli監(jiān)測webpack打包與啟動(dòng)時(shí)長的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02
淺析Vue中defineProps的解構(gòu)和不解構(gòu)
defineProps?是?Vue?3?Composition?API?中用來聲明組件接收的?props?的方法,本文主要為大家介紹了defineProps的解構(gòu)和不解構(gòu),感興趣的可以了解下2025-02-02
這篇文章主要介紹了vue二選一tab欄切換新做法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了vue項(xiàng)目中使用多選框的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-07
vue3界面使用router及使用watch監(jiān)聽router的改變
vue2中使用router非常簡單，但是vue3中略微有些改變，通過本文講解下他的改變，對vue3?watch監(jiān)聽router相關(guān)知識(shí)感興趣的朋友一起看看吧2022-11-11
vue2.0嵌套路由實(shí)現(xiàn)豆瓣電影分頁功能(附demo)
這篇文章主要介紹了vue2.0嵌套路由實(shí)現(xiàn)豆瓣電影分頁功能(附demo),這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。2017-03-03