解决Electron-Vite项目中Vue文件无法识别window全局变量的问题

在使用Electron-Vite构建Electron应用时，开发者可能会遇到一个常见问题：在Vue单文件组件(SFC)中访问window对象上的自定义属性时，TypeScript会提示"Unresolved variable"错误，而同样的代码在纯TypeScript文件中却能正常工作。

问题现象

当开发者在Vue单文件组件中尝试访问window对象上的自定义属性时，例如：

<script setup lang="ts">
import { reactive } from 'vue'

const versions = reactive({ ...window.electron.process.versions })
</script>

WebStorm或其他IDE会提示"Unresolved variable electron"的错误，尽管代码实际运行时能够正常工作。

问题原因

这个问题的根源在于TypeScript的类型系统无法自动识别Vue单文件组件中对window对象的扩展。在纯TypeScript文件中，通常我们会通过声明合并来扩展Window接口：

declare global {
  interface Window {
    electron: {
      process: {
        versions: Record<string, string>
      }
    }
  }
}

但在Vue单文件组件中，这种类型声明不会自动生效，因为Vue文件的类型检查是独立于项目主TypeScript配置的。

解决方案

方法一：修改tsconfig.json配置

1. 打开项目根目录下的tsconfig.json文件
2. 确保没有使用"files"字段过度限制TypeScript的文件包含范围
3. 如果存在"files": []这样的配置，建议删除或注释掉这行
4. 重启IDE使配置生效

方法二：显式声明全局类型

在项目的类型声明文件(如src/types/global.d.ts)中添加对Window接口的扩展：

interface Window {
  electron: {
    process: {
      versions: Record<string, string>
    }
  }
}

确保这个声明文件被包含在tsconfig.json的"include"或"files"配置中。

方法三：使用环境声明

在Vue单文件组件中直接添加类型声明：

<script setup lang="ts">
import { reactive } from 'vue'

declare global {
  interface Window {
    electron: {
      process: {
        versions: Record<string, string>
      }
    }
  }
}

const versions = reactive({ ...window.electron.process.versions })
</script>

最佳实践

对于Electron-Vite项目，推荐采用以下方式管理全局类型：

1. 在src目录下创建types文件夹
2. 添加global.d.ts文件用于全局类型声明
3. 在tsconfig.json中确保包含这些类型文件
4. 对于Electron特有的API，可以使用@types/electron或electron-builder提供的类型定义

总结

在Electron-Vite项目中，Vue单文件组件无法识别window全局变量的根本原因是类型系统的作用域问题。通过合理配置TypeScript和显式声明全局类型，可以完美解决这个问题，同时保持代码的类型安全和IDE的智能提示功能。