我們使用 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\_@vue_cli-service@3.12.1@@vue\cli-service\webpack.config.js的形式
而且，設置僅對當前項目有效，並不會影響到其它項目。
快去試試吧！
另附：webstorm如何避免node_modules影響性能的手段之一：
轉自：https://www.jianshu.com/p/05ee1edd6f9c