溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Vue中使用webpack別名的方法實(shí)例詳解

發(fā)布時(shí)間：2020-09-29 17:13:10 來(lái)源：腳本之家 閱讀：189 作者：格子熊 欄目：web開發(fā)

在工作中，我們經(jīng)常會(huì)寫出這種代碼：

import MHeader from '../../components/m-header/m-header'
@import "../../common/stylus/variable"
@import "../../common/stylus/mixin"

即，需要引入公共文件，但是公共文件的文件路徑里當(dāng)前文件很遠(yuǎn)，那么就會(huì)形成上面示例中的那種路徑很長(zhǎng)的情況。

而因?yàn)槲募夸浭羌s定俗成的，不可輕易更改，無(wú)法修改相對(duì)路徑。那么該怎么辦呢？

大家都知道，Vue中的js可以通過(guò)配置webpack別名（alias）來(lái)避免一長(zhǎng)串的路徑引用，即：

// 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í)，這種方法沒(méi)有錯(cuò)，只不過(guò)webpack對(duì)css的處理不同于js。

在js中，webpack對(duì)路徑進(jìn)行處理時(shí)，自動(dòng)將沒(méi)有路徑標(biāo)識(shí)（/ ，./，../）的第一個(gè)文件夾名當(dāng)做webpack別名處理。如，第一個(gè)文件夾名為components，那么webpack會(huì)自動(dòng)在alias中搜索有沒(méi)有對(duì)應(yīng)的別名，如果有，則直接替換路徑；沒(méi)有則報(bào)錯(cuò)。

在css中，webpack正常情況下，不會(huì)對(duì)路徑進(jìn)行處理。如果你想讓webpack對(duì)路徑進(jìn)行處理，那么，可以在路徑前標(biāo)識(shí)~，如下：

@import "~common/stylus/variable"
@import "~common/stylus/mixin"

相當(dāng)于通過(guò)添加~表示common是webpack別名而不是表示一個(gè)文件夾名。

正確使用webapck別名可以大大縮短引入文件的時(shí)間。

總結(jié)

以上所述是小編給大家介紹的Vue中使用webpack別名的方法實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手