"Cannot resolve directory '@'" in WebStorm for a Vue file-CodePudding

I'm using WebStorm 2021.2.4, and when I create a Vue.js 3 app I have this error:

It looks like the IDE cannot identify @ as the root directory src. How can I solve this?

CodePudding user response：

Vite, as well as vite aliases, is not yet supported. Please feel free to vote for WEB-53634 and linked tickets. Actually we can hardly afford supporting all possible ways to define path mappings coming from different bundlers, frameworks and plugins. In the future we'd likely provide some unified way to deal with them in the IDE. For now, I can only suggest creating a dummy config.js file with all aliases specified explicitly like

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, "src/"] ,
      ...
    },
  },
};

and then set the webpack configuration to Manual in Settings | Languages & Frameworks | JavaScript | Webpack and specify a full path to this dummy config there