Vue.js - Configuring WebStorm to set @ in path files to the src folder Vue.js - Configuring WebStorm to set @ in path files to the src folder vue.js vue.js

Vue.js - Configuring WebStorm to set @ in path files to the src folder


For vue-cli3, you need to specify a full path to node_modules/@vue/cli-service/webpack.config.js as a webpack configuration file in Settings | Languages & Frameworks | JavaScript | Webpack.

Note that this only works for JavaScript; webpack aliases are not resolved when using components written in TypeScript, path mappings in tsconfig.json should be used instead


Webstorm already supports resolving alias. Webstorm read your webpack.config.js in background.

If you're using vue-cli 3, we don't have webpack.config.js, but you can create webpack.config.js file manually

module.exports = {  resolve: {    alias: {      "@": require("path").resolve(__dirname, "src") // change this to your folder path    }  }};

webstorm will resolve it automatically


In phpstorm 2020.3.3, I could fix this by

  • Opening Settings > Languages & Frameworks > JavaScript > Webpack and choose "Automatically"
  • Once saved, this opens a popup asking to run webpack configuration. Click "Trust project and run"
  • Fixed!