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

心已赠人 2023-10-15 21:33 6阅读 0赞

## 前言 ##

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

## 整体步骤分为四个 ##

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

## 第一步，安装环境 ##

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

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

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

yarn create vite

按照提示选择react或者vue： ![16a5c37baa5b412fbfedaeda5069fce3.png][]

创建完成后，进入项目并安装依赖：![2d7ecccc5fa74d97860d5df657bd39d8.png][]

然后安装electron依赖：

yarn add concurrently electron cross-env -D

![5a4a5b3abc6e4946a7b6abcad6586693.png][]

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

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

![f9f79a928ba142d6bac9659b0226b143.png][]

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

## 第二步，修改配置 ##

当依赖安装完成后，我们修改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 就会成功执行了![6ad103fedd3e49e6bf29d45ee0754bc1.png][]

## 第四步，打包发布 ##

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

import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [react()],
      base: './'
    })

![15e5e4ebc16a44cdb1f79f65e18d266e.png][]

然后先执行编译命令：yarn run build![335f1138c9a44fea865c4b2d5699fed5.png][]

再执行：yarn run package

![adf0d694dc1848d58649307171e85a8f.png][]

打包后会有一个out文件夹： 双击即可打开，只是打出来的包太大了吧，158M，，，，，（tauri只有3M不到，这就是差距啊，发誓不用electron！）

![6be05ed4e0b34a039f15ee79c59ac5b7.png][]

然后正常运行： ![67a005fa10f44c679909d0fbb8892c4e.png][]

但是这158M的包大小，让人望而却步啊.............

最后还是推荐tauri开发，仅3M大小啊，不香吗

分享一个我用Tauri开发的一个软件，类似百度云，但是不和谐任何文件：[用Tauri+Vue3+TypeScript+Pinia写的基础类似百度云开发模板，支持国际化和主题切换，图片音视频播放等，可做图床视频床使用\_tauri vue\_1024小神的博客-CSDN博客][Tauri_Vue3_TypeScript_Pinia_tauri vue_1024_-CSDN]

[Vite _]: https://cn.vitejs.dev/
[16a5c37baa5b412fbfedaeda5069fce3.png]: https://img-blog.csdnimg.cn/16a5c37baa5b412fbfedaeda5069fce3.png
[2d7ecccc5fa74d97860d5df657bd39d8.png]: https://img-blog.csdnimg.cn/2d7ecccc5fa74d97860d5df657bd39d8.png
[5a4a5b3abc6e4946a7b6abcad6586693.png]: https://img-blog.csdnimg.cn/5a4a5b3abc6e4946a7b6abcad6586693.png
[f9f79a928ba142d6bac9659b0226b143.png]: https://img-blog.csdnimg.cn/f9f79a928ba142d6bac9659b0226b143.png
[b00a4600186f4b659cbff83f76233246.png]: https://img-blog.csdnimg.cn/b00a4600186f4b659cbff83f76233246.png
[6ad103fedd3e49e6bf29d45ee0754bc1.png]: https://img-blog.csdnimg.cn/6ad103fedd3e49e6bf29d45ee0754bc1.png
[15e5e4ebc16a44cdb1f79f65e18d266e.png]: https://img-blog.csdnimg.cn/15e5e4ebc16a44cdb1f79f65e18d266e.png
[335f1138c9a44fea865c4b2d5699fed5.png]: https://img-blog.csdnimg.cn/335f1138c9a44fea865c4b2d5699fed5.png
[adf0d694dc1848d58649307171e85a8f.png]: https://img-blog.csdnimg.cn/adf0d694dc1848d58649307171e85a8f.png
[6be05ed4e0b34a039f15ee79c59ac5b7.png]: https://img-blog.csdnimg.cn/6be05ed4e0b34a039f15ee79c59ac5b7.png
[67a005fa10f44c679909d0fbb8892c4e.png]: https://img-blog.csdnimg.cn/67a005fa10f44c679909d0fbb8892c4e.png
[Tauri_Vue3_TypeScript_Pinia_tauri vue_1024_-CSDN]: https://xiaoshen.blog.csdn.net/article/details/131132910