在 WebStorm 中,配置能夠識別 Vue CLI 3 建立的專案的別名 alias
阿新 • • 發佈:2020-09-02
我們使用 Webpack 經常會配置一些別名 alias
指向特定的目錄,這樣在使用 import
等語句時就不用寫一大堆的相對路徑了,常見的是將專案的 src
設定為 @
,比如某檔案的路徑是 src/libs/util.js
,配置後,任何地方就可以這樣匯入:
import util from '@/libs/util.js';
當然,這是很基礎的 Webpack 配置,但本文介紹的是 IDE WebStorm
能夠通過 Command + 點選左鍵直接進入別名的某個目錄下。WebStorm 預設是能夠解析 webpack 配置檔案的,也就是說你配置了 webpack 別名 alias 後,天生就支援這種快速跳轉檔案。
但是 Vue CLI 3 裡,是沒有傳統的 webpack 配置檔案的,因為使用另一種寫法整合到了 vue.config.js
裡,這時 WebStorm 就無法識別了,以至於上例匯入進來的 util
在上下文裡都無法被 WebStorm 解析到,那使用 WebStorm 的意義就大打折扣了。
這時,我們只需要在專案根目錄建立一個檔案 alias.config.js
:
/**
* 由於 Vue CLI 3 不再使用傳統的 webpack 配置檔案,故 WebStorm 無法識別別名
* 本檔案對專案無任何作用,僅作為 WebStorm 識別別名用
* 進入 WebStorm preferences -> Language & Framework -> JavaScript -> Webpack,選擇這個檔案即可
* */
const resolve = dir => require('path').join(__dirname, dir);
module.exports = {
resolve: {
alias: {
'@': resolve('src')
}
}
};
如果以上不生效,可以把wepack configuration file配置成類似d:\project-name\node_modules\_@[email protected]@@vue\cli-service\webpack.config.js
的形式
而且,設定僅對當前專案有效,並不會影響到其它專案。
快去試試吧!
另附:webstorm如何避免node_modules影響效能的手段之一:
轉自:https://www.jianshu.com/p/05ee1edd6f9c