问题简述
在 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 文件呢?
配置如下:
```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 吧。