使用 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.js

const { 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.tsx

import 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 工具），其他打包方式可自行探索。