Webstorm那些事 之 識別vue項目@根路徑符號

問題描述

相信大家在開發過程中一定碰到過vue項目中識別不了@符號（代表項目根路徑），就像下面這個圖一樣：

代碼下方一直有webstorm的提示波浪線，Module is not found 或者 Module is not install，使用Ctrl + 鼠標左鍵 也點不進去，很是頭大

問題解決

1. 安裝 @vue/cli-service

   npm install @vue/cli-service --save-dev
   

2. 在項目根目錄下創建 webstorm.config.js，並將下面內容粘貼進去

   'use strict'
   const webpackConfig = require('@vue/cli-service/webpack.config.js')
   module.exports = webpackConfig
   

3. 打開當前項目設置 FIle > Settings 或者 Ctrl + Alt + S，搜索Webpack，將剛剛創建的文件引入
   

效果

按照上面的步驟執行完成後，就可以看到剛剛識別不了的@符號現在能識別了，並且可以使用Ctrl + 鼠標左鍵點擊後進入對應文件