WebStorm vue项目@路径不能跳转到对应资源

WebStorm不能生效的样子

WebStorm vue项目@路径不能跳转到对应资源,提示找不到要转到的声明，关于这个功能有两种解决方案，接下来一一介绍

1.使用WebStorm内置配置 1.1点击项目的配置，文件>设置

1.2配置Webpack选项webpack.config.js

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, '..', dir)
}
module.exports = {
  context: path.resolve(__dirname, '../'),
  resolve: {
    extensions: ['.js', '.vue', '.json', '.ts', '.tsx'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      '@node': resolve('node_modules')
    }
  }
}

2.有些时候使用WebStorm的Wabpack配置不能生效时推荐使用配置文件

2.1在根目录新建配置文件文件名为tsconfig.json

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