在接触vite构建的vue3项目遇到配置相关的问题,webstorm在新文件中提示错误:
这是我新建的一个vue文件,在文档中可以看到红色部分提示错误了。
注意到
importo format from '@/utils/cdf.js'
这行,@竟然没有解析到根目录但是其他页面(不是新建的,ruoyi项目git下来就有的)没有提示,如下图:
好,现在看看这个项目的配置:
在vite目录下,有个auto-imports插件,内容如下
里面的变量名在vite编译的时候就提前引入了,让开发者不用在每个页面都要导入一遍这些常用vue方法:
const { createApp, ref } = Vue // 省了这类引入语句
那么现在的问题是,webstorm好像认不出来我新增的页面里这些不需要再次导入的常用方法或变量,怎么回事?
看了眼webstorm里的javascript编译器配置:
怎么能自动配置捏!果断改为手动,设定到目录下的vite.config.js文件。重启项目,还是不行。
解决方案
‘@’解析不到根目录是因为还需要配置一个jsconfig.json文件,这个文件用来配置一个javascript项目,指定这个项目的根目录,参考jsconfig.json说明
配置如下:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}
说明一个通配符‘/*’,来匹配js文件或脚本中所有的@引用
但是上述auto-import的方法或者变量还是有错误提示:
搞不懂,问了AI(Baidu Comate),才注意到,我的<script>脚本标签配置了lang="ts",真是作。