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 + 鼠标左键点击后进入对应文件