在 WebStorm 中，配置可以識別 Vue CLI 3 建立的項目的別名 alias @

2019-04-02 編輯

感謝 評論大佬提示

webstorm webpack 直接引入文件 項目目錄\node_modules\@vue\cli-service\webpack.config.js 便可。

2019-03-32 編輯

抄襲鏈接

咱們使用 Webpack 常常會配置一些別名 alias 指向特定的目錄，這樣在使用 import 等語句時就不用寫一大堆的相對路徑了，常見的是將項目的 src 設置爲 @，好比某文件的路徑是 src/libs/util.js，配置後，任何地方就能夠這樣導入：

import util from '@/libs/util.js';
複製代碼

固然，這是很基礎的 Webpack 配置，但本文介紹的是 IDE WebStorm 可以經過 Ctrl + 點擊左鍵直接進入別名的某個目錄下。WebStorm 默認是可以解析 webpack 配置文件的，也就是說你配置了 webpack 別名 alias 後，天生就支持這種快速跳轉文件。

可是 Vue CLI 3 裏，是沒有傳統的 webpack 配置文件的，由於使用另外一種寫法集成到了 vue.config.js 裏。

module.exports = { 
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src')) // key,value自行定義，好比.set('@@', resolve('src/good-analysis-total-components'))
      .set('_c', resolve('src/components'))
  }
}
複製代碼

這時 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')
        }
    }
};
複製代碼

這個配置文件對於項目無任何意義，也沒有任何地方使用到，只是爲了讓 WebStorm 可以識別，在 WebStorm 的配置裏，將它選爲 webpack 配置文件就大功告成了：

並且，設置僅對當前項目有效，並不會影響到其它項目。