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

Question

In Vue.js you have the possibility to use the @ in a path file as a shortcut to your src folder. It is nice because all your files have an absolute path.

However I don't manage to find a way to configure WebStorm to understand that and allow me to follow and check if the file exist when using it.

Example :

import Business from '@/components/Business/Business'

Writing that I want WebStorm to tell me if the file does not exists and to allow me to go to that file directly.

I did not manage to find any answer about it and neither managed to find a way to do it in the IDE.

Answer 1

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

Answer 2

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!