VB.net 2010 視頻教程 VB.net 2010 視頻教程 VB.net 2010 視頻教程
SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
當前位置:
魔兽世界wow > 網站開發 > JQuery >
  • JavaScript教程之Vue中使用webpack別名的方法

  • 2019-04-27 16:11 來源:未知

魔兽世界wow www.geyjm.icu 在工作中,我們經?;嶁闖穌庵執耄?/p>

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

即,需要引入公共文件,但是公共文件的文件路徑里當前文件很遠,那么就會形成上面示例中的那種路徑很長的情況。

而因為文件目錄是約定俗成的,不可輕易更改,無法修改相對路徑。那么該怎么辦呢?

大家都知道,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中,則會報錯:

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

其實,這種方法沒有錯,只不過webpack對css的處理不同于js。

在js中,webpack對路徑進行處理時,自動將沒有路徑標識(/ ,./,../)的第一個文件夾名當做webpack別名處理。如,第一個文件夾名為components,那么webpack會自動在alias中搜索有沒有對應的別名,如果有,則直接替換路徑;沒有則報錯。

在css中,webpack正常情況下,不會對路徑進行處理。如果你想讓webpack對路徑進行處理,那么,可以在路徑前標識~,如下:

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

相當于通過添加~表示common是webpack別名而不是表示一個文件夾名。

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

相關教程