解决编辑器webstorm、vscode无法识别vue的@/、~的问题

我们在开发的过程中，经常使用到‘@’代表‘src’，编辑器默认是无法识别到代表什么意思的，使用Ctrl+左键的方式无法找到对应文件。

方法一

1. 在项目根目录新建.eslintrc.js文件，配置 settings

const path = require('path')

module.exports = {
    settings: {
        'import/resolver': {
            alias: {
                map: [
                    ['~', path.resolve(__dirname, './src')],
                    ['@', path.resolve(__dirname, './src')],
                ],
            },
        },
    },
}

2. 重启编辑器即可

   
   
   image.png

方法二

1. vue.config.js新增配置项

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
      },
    },
  },
}

2. 重启编辑器

方法三

针对webstorm配置

Settings -> language & frameworks -> javascript -> webpack
webpack configuration file 设置为 当前项目目录[路径]下的 node_modules/@vue/cli-service/webpack.config.js
例如：D:/development/workspace/vue/vote-system/node_modules/@vue/cli-service/webpack.config.js