快速搭建Electron+Vite3+Vue3+TypeScript5脚手架 (无需梯子，快速安装Electron)

一、介绍 😆 😁 😉

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验(这段话是来自官网)。

二、搭建Vite+Vue3+TypeScript项目 😆 😁 😉

根据vite官网文档

yarn create vite

项目创建完成后进入ts-super-procedure目录，执行yarn安装相关依赖

三、安装Electron相关依赖 😆 😁 😉

如果你自己安装过Electron的相关依赖，想必你一定经历过失败、失败、失败。

这里需要借助一个网站检测服务器响应速度，然后拿到最快响应的ip进行本地配置加快我们的域名解析。

通过该工具可以多个地点Ping服务器以检测服务器响应速度。检查github.com。我都选择国内的，看自己想法选择啊。

修改 C:\Windows\System32\drivers\etc\hosts

20.27.177.113 github.com

安装electron依赖 👇 👇 👇 👇

yarn add -D electron electron-builder

根据官网提供的文档,需要创建一个BrowserWindow装载vite项目,你也可以写一个html页面。这里我们启动vite项目以后就会产生一个连接，正好把它装载到 BrowserWindow中。

因为src下面存放的使我们的vite项目，所以在根目录下创建一个electron.ts，你也可以叫man.ts，名字随便起，知道是干啥的就行。

配置完成以后分别启动yarn dev 和 yarn start，出现以下窗口表示搭建成功了。

四、优化 😆 😁 😉

因为现在需要启动两个服务，比较麻烦，可以借助concurrently插件整合。一个命令完成多个应用的启动。

yarn add concurrently -D

安装完成以后修改启动和打包命令

"scripts": {
  "dev": "concurrently \"vite\" \"electron .\"",
  "build": "yarn build:vite && yarn build:electron",
  "build:vite": "vue-tsc && vite build",
  "build:electron": "electron-builder",
  "preview": "vite preview"
},