許多專案腳手架預設就會把src目錄新增一個@別名，專案中實際引入時，雖然可以精簡路徑，但也帶來一個很麻煩的問題：
IDE無法識別這些別名，因此導致無法自動完成路徑、無法識別引用資源的輸出、出現不必要的告警等情況。

偶然發現vscode的web專案裡有一個jsconfig.json檔案，如：

{
 "compilerOptions": {
  "baseUrl": ".","paths": {
   "@/*": ["src/*"]
  },"target": "ES6","module": "commonjs","allowSyntheticDefaultImports": true
 },"include": ["src/**/*"],"exclude": ["node_modules"]
}

只要有這個檔案，vscode就可以正常識別出別名了。

後來發現JetBrains家的IDE更簡單，配置指定一下就行：

在專案設定的webpack標籤頁裡，將配置檔案指向<projectRoot>/node_modules/@vue/cli-service/webpack.config.js即可。

儲存並重新開啟專案以後，不只src，所有的別名比如utils等等都可以被正常識別。

其實這都已經寫在vue-cli3的文件裡了，只是原始表述不太直觀，被我一直忽略了。

到此這篇關於讓IDE識別webpack的別名alias的實現方法的文章就介紹到這了,更多相關ide webpack alias別名內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！