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

本机解决的是在webstorm中实现在vue项目中通过别名@实现点击跳转对应方法或文件

WebStorm vue项目@路径不能跳转到对应资源,提示找不到要转到的声明，关于这个功能有两种解决方案，接下来一一介绍
WebStorm不能生效的样子
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/0782333eef904542931bb4d21496bac0.png
前置声明：本文使用的是vue2.x的项目（vue3的同理，操作大体相同文件使用不一致，如果有vue3项目要是有的，不明白的可以评论留言）
1.使用WebStorm内置配置
1.1点击项目的配置，文件>设置

1.2在设置里面搜索配置，搜索关键词webpack

1.3配置Webpack选项
选择配置文件，一般把webpack.base.conf.js文件配置进来就可以生效了，主要代码如下

'use strict'
 const path = require('path')
 
 function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

 module.exports = {
  context: path.resolve(__dirname, '../'),
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'jquery': 'jquery'
    }
  }
}

‘@’: resolve(‘src’)这个配置就是主要实现@点击跳转的功能

1.4项目使用
配置正确之后项目中的@写法的引用就会高亮了

2.使用配置文件
有些时候使用WebStorm的Wabpack配置不能生效时推荐使用配置文件
2.1在根目录新建配置文件文件名为tsconfig.json

代码内容如下

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

2.2使用
配置完毕后也可以进行跳转，这里的核心跟配置文件是一致的，靠 "@/*": ["src/*"]进行跳转的使用的
以上就是 webstorm关于vue项目@路径不能跳转到对应资源的解决方式，如果觉得有用请多多关注点赞，博主会分享自己使用的过程中遇到的难点问题，大家共同进步！