electron-vite+ts引入 AutoImport 自动导入时,ts报错找不到名称“ref”。ts-plugin(2304)

688 阅读1分钟

在用electron创建项目的时候,觉得每次写变量都需要导入ref太麻烦,决定采用AutoImport 。导入以后确实能用,但是ts一直报找不到问题

我是采用下面的命令创建的

npm create @quick-start/electron@latest

Snipaste_2024-12-09_15-05-51.png

所以我在网上找了很多文章,我发现对于electron-vite引入AutoImport文章很少,都是基本的vite的引入,说是在tsconfig.json中加入include:["auto-imports.d.ts"]就可以了,但是加了以后不管用,还是继续报错。 然后我就一直纠错,突然发现貌似,vite和electron-vite目录甚至都不一样,写法也不应该相同,所以会找不到

众所周知,electron-vite的目录是这样的:

Snipaste_2024-12-09_15-11-00.png

tsconfig.json都是在最外层的根目录的,但是AutoImport生成的auto-imports.d.ts是在renderer中的

Snipaste_2024-12-09_15-12-25.png

而且我的tsconfig.json里,控制语句是放在tsconfig.web.json中的,加入箭头中的这句话,就不会报错了。

Snipaste_2024-12-09_15-24-12.png

{
  "extends": "@electron-toolkit/tsconfig/tsconfig.web.json",
  "include": [
    "src/renderer/src/env.d.ts",
    "src/renderer/src/**/*",
    "src/renderer/src/**/*.vue",
    "src/preload/*.d.ts",
     "auto-imports.d.ts",
     "*.d.ts",
     "src/renderer/src/auto-imports.d.ts",
     "src/**/auto-imports.d.ts",//这句话意思是,src下的任何文件中的auto-imports.d.ts都会匹配到
  ],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@renderer/*": [
        "src/renderer/src/*"
      ]
    }
  }
}