前端问题录——在导入模块时使用'@'时提示"Modile is not installed"

前情提要

为了尽可能解决引用其他模块时路径过长的问题，通常会在 vue.config.js 文件中为 src 目录配置一个别名 '@'

configureWebpack: {

  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
}

这样在引用其他模块时可以直接使用 '@' 来开头。

但是出现了 "Module is not installed" 的问题，给出的快速修复是 "Install '@utils/XXX' Alt+Shift+Enter" （图略）。

问题出现的原因及处理方式

IDE 未找到 webpack.config.js 文件，需要手动指定。

解决步骤

打开 WebStorm 的设置页面，找到如下位置

File | Settings | Languages & Frameworks | JavaScript | Webpack

（也可以双击 Shift 键之后搜索 'Webpack'，找到设置项）

在这里点击右侧的 "Select Path" 图标，选择 webpack.config.js 文件的位置（示例）：D:\Code\<项目名>\node_modules\@vue\cli-service\webpack.config.js

应用设置后重启 WebStorm，即可看到日志

再次引入，可以发现已正常展示，并且可以使用 "Ctrl+鼠标点击" 的方式进入所选模块中：

参考文献：https://blog.csdn.net/qq_37274323/article/details/100206842