Electron+Vue3.2+TypeScript+Vite开发桌面端_electron-devtools-installer-CSDN博客

本文链接：https://blog.csdn.net/qq_53225741/article/details/124964773

本文介绍了如何利用Electron、Vue3.2、TypeScript和Vite开发桌面应用程序。首先，文章详细描述了项目的目录结构设计，接着讲述了初始化项目、配置.yarnrc、安装Electron以及设置相应的项目配置。通过vite-plugin-electron插件，实现了Vue和Electron的结合。然后，文章展示了如何创建主进程和预加载文件，以及配置tsconfig.json和vite.config.ts。最后，讨论了在Vue中如何进行上下文隔离的接口调用，以显示系统平台信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 Electron可以让程序员重用Web的代码，使用HTML、CSS、JavaScript来构建桌面应用，并在不同平台上使用。

   Electron官网上说： **“比你想象的更简单”** ————“如果你可以建一个网站，你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。”

   Vue 是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。目前 Vue 已经成为继 Rect 之后最流行的前端开发框架。

   我找到了一个插件：**vite-plugin-electron**，可以很方便的帮我们把 electron 和 vue 结合起来，开发起来非常方便。

目录结构设计

因为我们需要使用 Electron 和 vue 进行开发，因此我们把它们分开目录存储，基础目录结构如下：

electron-main：主进程目录
electron-preload：预加载代码目录，主要是定义桥接通信
其他文件：也就是 vue 初始化后的目录

目录结构这么设计的原因是因为我们使用的 vite-plugin-electron 插件需要使用这样的目录结构，目前还没有提供设置修改。

初始化项目目录

下面就开始初始项目

yarn create vite electron-desktop --template vue-ts

先使用 vite 创建 vue 项目，然后我们再将 electron 嵌入到里面

初始化完成后，我们先做一个本地 yarn 源的配置，防止下载库的时候出现异常。

配置.yarnrc

registry "https://registry.npm.taobao.org/"

electron_mirror "https://npm.taobao.org/mirrors/electron/"
electron_builder_binaries_mirror "http://npm.taobao.org/mirrors/electron-builder-binaries/"

配置完下载源后，就可以安装 electron 了

安装Electron

yarn add -D electron electron-builder rimraf vite-plugin-electron electron-devtools-installer

electron-builder：打包工具
rimraf：快速删除文件或目录工具
vite-plugin-electron：vite 结合 electron 的库，关于这个插件可以参见 Vite 与 Electron 无缝衔接
electron-devtools-installer：electron 开发工具

vite-plugin-electron 插件是将 vite 和 electron 结合在一起的，可以让我们非常方便的结合 electron 和 vue，需要做一些指定的配置。