在webstorm中实现在vue项目中通过别名@实现点击跳转对应

第一种方式

webstorm设置点击文件路径快捷跳转

1、点击左上角File -> settings

image.png

2、搜索webpack

image.png
3、选择当前项目下 node_modules@vue\cli-service\webpack.config.js

第二种方式：

基于webstrom开发工具的

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

'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: {
      '@': resolve('src'),
      '@views': resolve('src/views'),
      '@comp': resolve('src/components'),
      '@core': resolve('src/core'),
      '@utils': resolve('src/utils')
    }
  }
}

1，项目根目录创建webstorm.config.js文件，复制上面代码实现标题功能

2，settings->languages $ framerworks -> javascript -> webpack

image.png

第三种方式 vue-cli创建的项目还需要创建webpack-config.js文件吗？

image.png

红色标记 这个就是webpack配置文件
vue-cil创建好了
内容如下：

image.png