Resolve Webpack alias in Webstorm

resolveWebtackAlias.md

Resolve Webpack alias in Webstorm

import UiButton from '@/components/UiButton'
import UiDataBox from '@/components/UiDataBox'

https://blog.jetbrains.com/webstorm/2017/06/webstorm-2017-2-eap-172-2827/

By default WebStorm will analyse the webpack configuration file in the root of the project, but you can select another file in Preferences | Languages & Frameworks | JavaScript | Webpack

For Vue cli v3

project_path/node_modules/@vue/cli-service/webpack.config.js

or

// webpack.config.js

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

It works! Thank you ❤️

thanks ❤️