"Cannot resolve directory '@'" 在 WebStorm 中用于 Vue 文件

Question

我正在使用 WebStorm 2021.2.4，当我创建 Vue.js 3 应用程序时出现此错误：

看起来 IDE 无法将 @ 识别为根目录 src。我该如何解决？

Answer 1

Vite，以及 vite aliases, is not yet supported. Please feel free to vote for WEB-53634 和链接的门票。实际上，我们几乎负担不起支持所有可能的方式来定义来自不同打包器、框架和插件的路径映射。将来我们可能会在 IDE 中提供一些统一的方式来处理它们。现在，我只能建议创建一个虚拟 config.js 文件，其中所有别名都明确指定，例如

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

然后在Settings中将webpack配置设置为Manual |语言与框架 | JavaScript | Webpack 并在此处指定此虚拟配置的完整路径

"Cannot resolve directory '@'" 在 WebStorm 中用于 Vue 文件

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

webstorm

vue.js