vue 3 项目配置

在接触vite构建的vue3项目遇到配置相关的问题,webstorm在新文件中提示错误:

image.png

这是我新建的一个vue文件,在文档中可以看到红色部分提示错误了。
注意到importo format from '@/utils/cdf.js'这行,@竟然没有解析到根目录
但是其他页面(不是新建的,ruoyi项目git下来就有的)没有提示,如下图:
image.png

好,现在看看这个项目的配置:
image.png

在vite目录下,有个auto-imports插件,内容如下
image.png

里面的变量名在vite编译的时候就提前引入了,让开发者不用在每个页面都要导入一遍这些常用vue方法:

  const { createApp, ref } = Vue    // 省了这类引入语句

那么现在的问题是,webstorm好像认不出来我新增的页面里这些不需要再次导入的常用方法或变量,怎么回事?
看了眼webstorm里的javascript编译器配置:


image.png

怎么能自动配置捏!果断改为手动,设定到目录下的vite.config.js文件。重启项目,还是不行。

解决方案

‘@’解析不到根目录是因为还需要配置一个jsconfig.json文件,这个文件用来配置一个javascript项目,指定这个项目的根目录,参考jsconfig.json说明
配置如下:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"]
        }
    }
}

说明一个通配符‘/*’,来匹配js文件或脚本中所有的@引用
但是上述auto-import的方法或者变量还是有错误提示:


image.png

搞不懂,问了AI(Baidu Comate),才注意到,我的<script>脚本标签配置了lang="ts",真是作。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容