在 WebStorm 中，配置能夠識別 Vue CLI 3 建立的專案的別名 alias @

杜萍偉發表於2019-03-22
WebORMVue

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 配置檔案就大功告成了：

在 WebStorm 中，配置能夠識別 Vue CLI 3 建立的專案的別名 alias @

而且，設定僅對當前專案有效，並不會影響到其它專案。

相關文章