使用 React+Vite+Electron 搭建桌面应用

使用 React+Vite+Electron 搭建桌面应用

1. 安装依赖（先确保 Node.js 已安装）

npm create vite@latest my-electron-app --template react
cd my-electron-app
yarn

2. 安装 Electron 和辅助工具

yarn add --dev electron concurrently wait-on electron-builder

**注意：**安装 Electron 和相关辅助工具时，会出现依赖安装不上的问题，解决方法：改变镜像

• code ~/.npmrc 
  

  **提示：**如果提示 code: command not found ，说明你没有配置 VS Code 的命令行工具，可以在 VS Code 里按 Cmd+Shift+P ，搜索并执行 Shell Command: Install 'code' command in PATH 。

• 添加如下几句：

  registry=https://registry.npmmirror.com
  electron_mirror=https://cdn.npmmirror.com/binaries/electron/
  electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
  

• 关闭该窗口，重启命令行，删除node_modules文件夹，并执行下面命令清除缓存，再重新安装依赖，应该就可以正常安装了

  npm cache clean --force
  

或者使用 cnpm 安装顺利

3. 添加 Electron 文件（主进程文件）

项目根目录新建 electron.js 文件：

// electron.jsconst { app, BrowserWindow } = require('electron')
const path = require('path')function createWindow() {const win = new BrowserWindow({width: 1600,  // 窗口宽度height: 1200, // 窗口高度icon: path.join(__dirname, 'public/icons/icon.png'), // 开发环境图标webPreferences: {preload: path.join(__dirname, 'preload.js'),},})// 开发阶段加载 Vite 启动的地址win.loadURL('http://localhost:5173')
}app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})

4. 新建空的 preload.js

// preload.js

5. 修改 package.json

// package.json
// 注：我这里安装了tailwind那一套，可自行选择{"name": "my-electron-app","private": true,"version": "0.0.0","main": "electron.js", // 入口文件"type": "module", // ----------注意！！默认生成的这一行一定要去掉，否则会报错"scripts": {"dev": "vite","build": "tsc -b && vite build","lint": "eslint .","preview": "vite preview","electron:dev": "concurrently \"vite\" \"wait-on http://localhost:5173 && electron .\"", // electron启动命令"electron:build": "vite build && electron-builder" // electron打包命令},"build": {"appId": "com.electron.listapp", // appId"productName": "LightWheel", // 应用名称"linux": { // 以下关于icon的配置，需存放在public目录下，可以自定义（当前public/icons/）"target": ["AppImage","deb"],"icon": "public/icons/icon.png"},"mac": {"icon": "public/icons/icon.icns"},"win": {"icon": "public/icons/icon.ico"}},"dependencies": {"antd": "^5.26.0","axios": "^1.9.0","react": "^19.1.0","react-dom": "^19.1.0","react-use": "^17.6.0"},"devDependencies": {"@eslint/js": "^9.25.0","@types/react": "^19.1.2","@types/react-dom": "^19.1.2","@vitejs/plugin-react": "^4.4.1","autoprefixer": "^10.4.21","concurrently": "^9.1.2","electron": "^36.4.0","electron-builder": "^26.0.12","eslint": "^9.25.0","eslint-plugin-react-hooks": "^5.2.0","eslint-plugin-react-refresh": "^0.4.19","globals": "^16.0.0","postcss": "^8.5.4","tailwindcss": "^3.4.17","typescript": "~5.8.3","typescript-eslint": "^8.30.1","vite": "^6.3.5","wait-on": "^8.0.3"}
}

**注意：**mac、win、Linux上面的icon设置需要用到不同的资源，可以在这个网站上相互转化，最终

• macOS 需要 .icns
• Windows 需要 .ico
• Linux 通常用 .png

https://www.alltoall.net/png_ico/

6. 添加一个简单的页面

// App.tsximport AssetsList from './pages/assets-list'function App() {return <div>App页面</div>
}export default App

7. 运行项目

npm run electron:dev

8. 打包

npm run electron:build

dist 目录下会出现一个 .dmg 的文件，此时就可以安装这个软件包到你的 macos 了，我在 macOS 上运行打包命令，而 Electron 不支持跨平台打包 Linux 或 Win 安装包（除非用 Docker 或 CI 工具），其他打包方式可自行探索。