vue-cli1.x,vue-cli2.x webstorm配置识别@可以设置webpack.base.conf.js。
路径地址
build/webpack.base.conf.js

vue-cli3.x没有改文件，cli对webpack做了一层封装，配置写在了vue.config.js
// vue.config.js

chainWebpack: (config) => {
        config.resolve.alias
            .set('@', resolve('src'))
            .set('api', resolve('src/api'))
            .set('common', resolve('src/common'))
            .set('xxx', resolve('src/xxxx'));
}

新建一个alias.config.js

/alias.config.js
function resolve(dir) {
    return path.join(__dirname, dir)
}
 
module.exports = {
    resolve: {
        alias: {
            '@': resolve('src'),
            'common': resolve('src/common'),
            'api': resolve('src/api'),
            'xxx': resolve('src/xxxx')
        }
    }
};

webstorm中添加该文件
webstorm -> setting -> Languages&Frameworks -> javascript -> webpack

 vscode 中 vue 项目的@不会提示，在根目录添加一个jsconfig.json文件，即可在 script 标签中使用@。

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