home > tools > CodeEditor > intelliJ >

jetbrain出品webstorm intellij等如何識別wepback項目別名@

author:[email protected]    hits:

Webpack經常會配置一些別名alias指向特定的目,省下每個路徑都要去寫一堆的前置目錄。但是習慣webstorm或者intellij的發現IEDA識別不了。不像切換vscode的話,還是得手動配置。特別是vue3 0用vue-cli腳手架的,還是得手動解決。

Webpack經常會配置一些別名alias指向特定的目錄,這樣在使用 import 等語句時就不用寫一大堆的相對路徑了,常見的是將項目的src設置為 @,比如某文件的路徑是 src/libs/util.js,配置后,任何地方就可以這樣導入:

import util from '@/libs/util.js';//src/libs/util.js

但是,配置別名后,webstorm 或者intellij 不識別,按住command或者ctr 鍵點擊也不會自動跳轉。

2019版的能自動識別wepback配置文件,之前版本的需要手動配置。別入識別vue3.0 vue-cli 里面的webpack配置。

在setting -> languages&frameworks -> webpack里選擇配置文件路徑為 node_modules/@vue/cli-service/webpack.config.js即可。

在WebStorm配置webpack識別@路徑別名

因為:

  • webpack.config.js 原來是幫助webstorm來優化配置的,但是webstorm無法應對千奇百怪的架構變化,

  • 分析實質其實就是利用了webpack.config.js中的 module.exports語法來分析alias路徑,從而幫助我們解析文件。

  • 所以我們只需要寫一個JS文件和webpack.config.js相似,同時也module.export相同的參數即可。

第二種方案,

由于 Vue CLI 3 不再使用傳統的 webpack 配置文件,導致 WebStorm 無法識別別名,需要手動創建一個 webpack 配置文件。


在項目根目錄,創建一個 alias.config.js 文件,寫入以下代碼:

const resolve = dir => require('path').join(__dirname, dir)
module.exports = {
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
}

然后在 Languages & Frameworks - JavaScript - Webpack 里指定 webpack 配置文件。

參考文章:

jetbrains: webstorm如何識別webpack中的@等alias符號

在 WebStorm 中,配置能夠識別 Vue CLI 3 創建的項目的別名 alias @

在WebStorm配置webpack識別@路徑別名


轉載本站文章《jetbrain出品webstorm intellij等如何識別wepback項目別名@》, 請注明出處:http://www.qsexmk.tw/html/tools/CodeEditor/intelliJ/2016_0215_4174.html