Electron 第一章，初步尝试搭建一个桌面端应用前言使用 vite + React 去搭建一个 Electron

前言

学习使用 Vite + React 去搭建一个 Electron 项目，并运行起来

环境要求

node.js：18+ 或 20+

vite：4.0+

如果想切换版本可以使用nvm工具切换，还可以配合nrm去切换源

nrm 安装

npm install -g nrm

# 查看可选源
nrm ls

# 切换源
nrm use taobao

搭建项目

可以按照官方的方式来搭建，有两种搭建方式链接

npm create vite@latest electron-react-vite

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
❯   Others

? Select a variant: › - Use arrow-keys. Return to submit.
    create-vite-extra ↗
❯   create-electron-vite ↗

# Choose your preferred front-end framework language
? Project template: › - Use arrow-keys. Return to submit.
    Vue
 ❯  React
    Vanilla

# Enter the project to download dependencies and run them
cd electron-react-vite
npm install | pnpm install
npm run dev

运行

运行npm run dev报错，如图

我的解决方式是这样的，个人感觉比较麻烦（如果有好的解决方案可以评论下）

先需要下载一个插件unzip

unzip 下载地址

运行

npm install electron-fix -g

package.json

"fix": "electron-fix start"

最后

# 安装依赖
pnpm install

#运行 fix
npm run fix

# 启动
npm run dev

亲测有效果，2024.12.18