首页 > tools > CodeEditor > intelliJ > > 正文

jetbrain出品webstorm intellij等如何识别wepback项目别名@

发布人：zhoulujun@live.cn    点击：

Webpack经常会配置一些别名alias指向特定的目，省下每个路径都要去写一堆的前置目录。但是习惯webstorm或者intellij的发现IEDA识别不了。不像切换vscode的话，还是得手动配置。特别是vue3 0用vue-cli脚手架的，还是得手动解决。

Webpack经常会配置一些别名alias指向特定的目录，这样在使用 import 等语句时就不用写一大堆的相对路径了，常见的是将项目的src设置为 @，比如某文件的路径是 src/libs/util.js，配置后，任何地方就可以这样导入：

import util from '@/libs/util.js';//src/libs/util.js

但是，配置别名后，webstorm 或者intellij 不识别，按住command或者ctr 键点击也不会自动跳转。

2019版的能自动识别wepback配置文件，之前版本的需要手动配置。别入识别vue3.0 vue-cli 里面的webpack配置。

在setting -> languages&frameworks -> webpack里选择配置文件路径为 node_modules/@vue/cli-service/webpack.config.js即可。

在WebStorm配置webpack识别@路径别名

因为：

  • webpack.config.js 原来是帮助webstorm来优化配置的，但是webstorm无法应对千奇百怪的架构变化，

  • 分析实质其实就是利用了webpack.config.js中的 module.exports语法来分析alias路径，从而帮助我们解析文件。

  • 所以我们只需要写一个JS文件和webpack.config.js相似，同时也module.export相同的参数即可。

第二种方案，

由于 Vue CLI 3 不再使用传统的 webpack 配置文件，导致 WebStorm 无法识别别名，需要手动创建一个 webpack 配置文件。


在项目根目录，创建一个 alias.config.js 文件，写入以下代码：

const resolve = dir => require('path').join(__dirname, dir)
module.exports = {
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
}

然后在 Languages & Frameworks - JavaScript - Webpack 里指定 webpack 配置文件。

参考文章：

jetbrains: webstorm如何识别webpack中的@等alias符号

在 WebStorm 中，配置能够识别 Vue CLI 3 创建的项目的别名 alias @

在WebStorm配置webpack识别@路径别名


收藏
上一篇：jetbrain IntelliJ IDEA配置nodejs环境-插件无法安装
下一篇：intellij无法启动及mac版intellij 2019.1.2版本 javaagent破解失效
延伸阅读：