解决IDE无法识别Webpack别名的问题

IDE无法识别Webpack别名的问题

许多项目脚手架默认会将src目录添加一个@别名。虽然在项目中实际引入时可以精简路径，但这也会带来一个麻烦的问题：IDE无法识别这些别名，从而导致无法自动完成路径、无法识别引用资源的输出，甚至出现不必要的告警。

VSCode配置jsconfig.json

偶然发现，在VSCode的Web项目中存在一个jsconfig.json文件，例如：

{
 "compilerOptions": {
  "baseUrl": ".",
  "paths": {
   "@/*": ["src/*"]
  },
  "target": "ES6",
  "module": "commonjs",
  "allowSyntheticDefaultImports": true
 },
 "include": ["src/**/*"],
 "exclude": ["node_modules"]
}

只要配置了这个文件，VSCode就能正常识别出别名。

JetBrains IDE配置方法

后来发现，JetBrains系列的IDE配置更为简单，只需指定相关配置即可：

在项目设置的Webpack标签页中，将配置文件指向<projectRoot>/node_modules/@vue/cli-service/webpack.config.js即可。

保存并重新打开项目后，不仅src目录，所有的别名如utils等都可以被正常识别。

其实这已经写在vue-cli3的官方文档中，只是原始表述不够直观，导致我一直忽略了这一功能。

到此这篇关于让IDE识别webpack的别名alias的实现方法的文章就介绍到这了，更多相关ide webpack alias别名内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！