vscode中vue项目点击链接，跳转对应引入模块

背景：现在项目中都是模块化开发，经常在文件A引入另一文件B的模块来使用，开发维护时，多半需要看看引入B干了些什么，那么快速找到文件B是非常节时省力的事儿！
如下代码所示，按住ctrl+鼠标左键，第一个无法跳转到对应目录，第二个却可以

 

import { longPress } from '@/directives/index'
import { clickOutside} from '../../directives/index'

 

 

解决方法：

1、项目中配置@的alias别名

// vue.config.js文件
const path = require('path')
const resolve = (dir) => {
  return path.join(__dirname, dir)
}

module.exports = {
  configureWebpack: {
    name: 'myAdmin',
    resolve: {
      alias: {
        '@': resolve('src'),
      }
    }
  },
}

 

2、项目根目录中的jsconfig.json或者tsconfig.json（没有的话手动创建）

// jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

 

配置完记得重启。