在工作中，我們經常會寫出這種代碼：
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別名可以大大縮短引入文件的時間。
總結
以上所述是小編給大家介紹的Vue中使用webpack別名的方法實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
