Vite+React+Electron开发入门，10分钟搭建本地环境并打包

前言

想使用vite和react开发跨平台桌面的软件方案有electron和tauri两种，但是我个人更喜欢tauri，无奈electron名声大燥，面试要求里很多都写着：electron...可见这类公司多么落后。但是呢，又秉持着存在即合理的理念，electron也有自己的优势，所以今天就来体验一下吧

整体步骤分为四个

安装环境，修改配置，本地启动调试，打包发布。让你十分钟之内熟悉整个流程。

第一步，安装环境

需要node环境，至少14以上，假装你已经有了。推荐使用nvm管理多版本node。

然后安装vite环境：Vite | 下一代的前端工具链

然后使用vite创建一个react或者vue程序：

yarn create vite

按照提示选择react或者vue：

创建完成后，进入项目并安装依赖：

然后安装electron依赖：

yarn add concurrently electron cross-env -D

安装electron打包依赖：并创建打包配置文件

yarn add --dev @electron-forge/cli
npx electron-forge import

执行完npx electron-forge import后，你的项目根目录会出现一个forge.config.js文件：

第二步，修改配置

当依赖安装完成后，我们修改package.json文件，添加打包脚本：

  "scripts": {
    "start": "npm run build && npm run electron:start",
    "dev": "concurrently -k \"vite\" \"npm run electron:dev\"",
    "build": "vite build",
    "preview": "vite preview",
    "electron:start": "cross-env IS_DEV=false electron-forge start",
    "electron:dev": "cross-env IS_DEV=true electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },

还需要在package.json的script同级添加几个配置：

  "main": "app/index.js",
  "description": "electron-vite-react",
  "license": "MIT",
  "author": {"name": "1024小神", "email": "15670339118@163.com"},
  "scripts": {
    "start": "npm run build && npm run electron:start",
    "dev": "concurrently -k \"vite\" \"npm run electron:dev\"",
    "build": "vite build",
    "preview": "vite preview",
    "electron:start": "cross-env IS_DEV=false electron-forge start",
    "electron:dev": "cross-env IS_DEV=true electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },

并且删除一个配置："type": "module",因为这个配置会导致你启动失败和打包失败等各种问题：Error [ERR_REQUIRE_ESM]: require() of ES Module

然后创建electron的启动文件：创建一个app目录，添加index.js，内容如下：

const path = require('path')
const { app, BrowserWindow } = require('electron')

if (require('electron-squirrel-startup')) {
  app.quit()
}

const isDev = process.env.IS_DEV === 'true'

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  })
  if (isDev) {
    mainWindow.loadURL('http://localhost:5173')
    mainWindow.webContents.openDevTools()
  } else {
    mainWindow.loadFile(path.join(__dirname, '../dist', 'index.html'))
  }
}

app.whenReady().then(() => {
  createWindow()
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

第三步，本地启动

不出意外的话，你执行 yarn run dev 就会成功执行了

第四步，打包发布

此时记得修改vite打包配置： base： "./" ，不然打包后的程序打开可能是白屏，因为他们加载不到js文件，需要设置一下路径就可以了

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: './'
})