webpack中關於路徑別名

2021-10-06 19:24:02 字數 397 閱讀 9147

起路徑別名:

對於vue-cli2中,在webpack-config-js中

resolve:

},

對於vue-cli腳手架版本大於等於3中,在vue.config.js中

`module.exports = 

}}}`

路徑別名可以使用在import語法中,如樣式檔案的引入@import("@/xyz/") 或 import xx from 「@/xyz/」 或元件按需載入() => import(『views/profile/profile』)

注意在標籤元素中或者在style中使用別用,如img標籤中src引入時加 波浪號 使用,如

webpack路徑的別名配置

如果還不知道webpack的同學,可以先自行去了一些webpack,傳送門webpack詳細入門整理 我們在使用模組化開發的時候都是使用import或者require去匯入我們的模組,但是當我們專案較大,模組較多的時候,我們用相對路徑匯入是一件麻煩的事情。那有沒有一種更簡便的方法去匹配路徑呢?這時我...

基於webpack的vue專案路徑別名

在vue的專案裡,我們可以使用.這樣的相對路徑的方式引用不同目錄的元件 import userinfo from components userinfo.vue 使用.引用的路徑比較深,定位路徑和書寫不方便,並且不直觀。由於專案是基於webpack,比較好的做法是使用webpack對路徑定義乙個別名...

webpack別名配置

還在為檔案引入路徑的點點槓發愁?webpack在resolve解析屬性裡貼心地配置了別名功能,讓你輕鬆地找到檔案路徑。不過,對於windows使用者,奇葩的反斜槓 路徑分隔符可能會讓你抓狂,不過不用擔心,nodejs提供了乙個貼心的path模組自動糾正路徑分隔符。只需要在配置檔案裡引入path va...