1. <wbr id="m8vu6"></wbr>

      <del id="m8vu6"><center id="m8vu6"><source id="m8vu6"></source></center></del>
        <p id="m8vu6"><sub id="m8vu6"></sub></p>

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

        在工作中,我們經常會寫出這種代碼:

        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別名可以大大縮短引入文件的時間。

        相關教程
                
        免费看成年人视频大全_免费看成年人视频在线观看