如何让 WebStorm 识别 Vue 项目中的 @ 路径配置

解决 webStorm 无法识别 @ 路径，点击无法跳转到引用文件的问题

方法一

点击 Files => Settings => Languages & Frameworks => Webpack

选择路径为：node_modules@vue\cli-service\webpack.config.js

方法二

若方法一无效，就新建一个 webpack.config.js 配置文件或在已有的文件，写入以下代码

const path = require('path')  
  
const resolve = (dir) => {  
  return path.join(__dirname, '.', dir)  
}
  
module.exports = {  
  context: path.resolve(__dirname, './'),  
  resolve: {  
    extensions: ['.js', '.vue', '.json'],  
    alias: {
      "@": resolve('src')  
    }
  }
}

随后按照方法一，配置上此文件即可。

大概的原理其实就是让编辑器识别加载工程里面的webpack配置文件，通常设置 Automatically 就行，但是我的工程里面都不管用的，反倒是要手动新增一个文件才行。

类似的，假如使用 uniapp 开发的（我的习惯是 HbuilderX运行，用 WebStorm 来编码），也可以写一个 config.js 文件，让 WebStorm 读取这个文件，就能识别 @ 路径了。

参考链接：

webpack 中文文档 - Resolve

webpack | WebStorm Documentation