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

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 文件呢?

配置如下:

```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 吧。

转载请说明出处内容投诉
CSS教程_站长资源网 » Webstorm无法识别Vite构建的工程的@别名符号解决方案——偷梁换柱骚操作。

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买