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