Webstorm无法识别Vite构建的工程的@别名符号解决方案——偷梁换柱骚操作。

问题简述

在 2022.1 版本 Webstorm IDE 里面，创建好一个 Vite 工程之后，IDE 会提示 Cannot resolve xxx。意思就是说无法解析 @ 符号表示的路径。

问题分析

可能是版本比较老旧的原因，新版的 2023 就没有这个问题，因为它自身集成了 Vite 官方的语法插件。旧版的只是自己手动下载了一个第三方的 Vite Integrated 插件，可能语法支持没有到位。

解决方案

查了一下网上的解决方法，都是说在设置里面选择 Webpack 的配置文件路径，因为 Webpack 也支持 @ 符号别名。

在你的本地磁盘某个位置新建一个 webpack.config.js 文件，然后导入这边的配置里面，要选择 Manually 才行。

但是我试了一下好像还是不行。最后我误打误撞，还是选择 Automatically。心想如果选择 Manually 模式可以的话，那么说明就可以把 Vite 工程当成 Webpack 工程，那么为何不直接在工程目录下面新建一个 webpack.config.js 文件呢？

配置如下：

const path = require('path')

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  // 配置别名
  configureWebpack: (config) => {
    config.resolve.alias = {
      '@': path.resolve(__dirname, 'src'),
    }
  }
})

然后在 .gitignore 文件内部忽略 webpack.config.js 文件。最后奇迹发生了，Webstorm 竟然能正常提示语法了。

如果你还是嫌麻烦，那还是下载最新版的 Webstorm 吧。