专业的编程技术博客社区

网站首页 > 博客文章 正文

搭建electron+vite框架的三种方法

baijin 2025-08-02 17:18:57 博客文章 2 ℃ 0 评论

搭建一个 electron 应用,有以下几种方法:

C 一、electron-vite

electron-vite 是一个新型构建工具,旨在为 Electron 提供更快、更精简的开发体验。

条件: 需要 Node.js 版本 18+,20+ 和 Vite 版本 4.0+

npm i electron-vite -D

搭建第一个 electron-vite 项目 在命令行中运行以下命令:

npm create @quick-start/electron@latest
 Project name: … <electron-app>
 #技术分享
 Select a framework: > vue  Add TypeScript? … No / Yes  Add Electron updater plugin? … No / Yes  Enable Electron download mirror proxy? … No / Yes

使用 electron-vite 生成的结构是这样的:

├──src/
│  ├──main
│  ├──preload
│  └──renderer
├──electron.vite.config.js
└──package.json

electron.vite.config.js 文件是这样:

import { defineConfig } from 'electron-vite'
import { resolve } from 'path'

export default defineConfig({ main: { build: { rollupOptions: { input: { index: resolve(__dirname, 'electron/main/index.ts') } } } }, preload: { build: { rollupOptions: { input: { index: resolve(__dirname, 'electron/preload/index.ts') } } } }, renderer: { root: '.', build: { rollupOptions: { input: { index: resolve(__dirname, 'index.html') } } } } })

总结:用 electron-vite 构建 electron 相对比较简单,生成的目录结构清晰,配置方便,但是要求 node 版本较高。

C 二、vite-plugin-electron

vite-plugin-electron 是一个插件,使得在 Vite 项目中开发 Electron 应用变得像普通的 Vite 项目一样简单。它提供了热重启、热重载和 HMR 等功能,并且完全兼容 Vite 及其生态系统。

条件:node.js 版本 14.18.0+以上

先创建一个 vite-vue3的项目,然后安装插件:

npm i -D vite-plugin-electron vite-plugin-electron-renderer electron

文档结构:

.
├──electron
│  ├──main
│  │  ├──index.ts
│  │  └──...
│  └──preload
│     ├──index.ts
│     └──...
├──src   # with vue, react, etc.

├──index.html ├──vite.config.ts ├──package.json └──...

然后在 vite.config.ts 中添加插件配置:

import electron from 'vite-plugin-electron';
import renderer from 'vite-plugin-electron-renderer';
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd());
  return {
    resolve: {
      alias: {
        '~': path.resolve(__dirname, './'),
        '@': path.resolve(__dirname, './src'),
      },
      extensions: ['.js', '.vue', '.json', '.ts', '.tsx', '.scss', '.css'],
    },
    build: {
      rollupOptions: {
        input: {
          index: path.resolve(__dirname, './index.html'),
        },
        external: ['child_process'],
      },
    },
    plugins: [
      vue(),
      electron([

        {

          entry: 'electron/main/index.ts',
          onstart(options) {

            options.startup();
          },
          vite: {
            build: {

              outDir: 'dist-electron/main',
              rollupOptions: {
                external: ['child_process'],
              },
            },
          },
        },

        {
          entry: 'electron/preload/index.ts',
          onstart(options) {

            options.reload();
          },
          vite: {
            build: {
              outDir: 'dist-electron/preload',
            },
          },
        },
      ]),
      renderer({

        nodeIntegration: true,
      }),
    ],
    },
  };
});

然后,在 package.json 中添加主入口:

"name": "my-electron",
"description": "my electron project",
"main": "dist-electron/main/index.js",
"keywords": [
"electron",
"rollup",
"vite",
"vue3",
"vue"
],
"scripts": {
    "dev": "vite --mode development",
    "build": "vue-tsc --noEmit && vite build && electron-builder"
  },
 "build": {
    "appId": "你的桌面名称",
    "asar": true,
    "icon": "public/assets/main/logo-64.png",
    "extraResources": [
      {
        "from": "./build/executor",
        "to": "./executor"
      },
    ],
    "publish": [
      {
        "provider": "generic",
        "url": "http://xxx"
      }
    ],
    "directories": {
      "output": "release/dev/${version}"
    },
    "files": [
      "dist-electron",
      "dist"
    ],
    "mac": {
      "artifactName": "${productName}_${version}.${ext}",
      "target": [
        "dmg"
      ]
    },
    "win": {
      "icon": "build/logo256.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ],
      "artifactName": "${productName}_${version}.${ext}"
    },
    "linux": {
      "icon": "build/icon",
      "artifactName": "${productName}_${version}-linux.${ext}",
      "category": "Utility",
      "target": [
        {
          "target": "deb"
        }
      ]
    },
    "nsis": {
      "oneClick": false,
      "perMachine": true,
      "createDesktopShortcut": true,
      "shortcutName": "桌面应用的简称",
      "deleteAppDataOnUninstall": false,
      "installerIcon": "./build/logo256.ico",
      "uninstallerIcon": "./build/logo256.ico",
      "include": "build/customInstall.nsh"
    }
  },

总结:使用插件可以在旧项目上直接改造成 electron 项目,配置简单,运行命令没有改变,更方便.

C 三、Electron Forge

Electron Forge 是一个用于打包和分发 Electron 应用程序的一体化工具。它结合了许多单一用途的包,以创建一个开箱即用的完整构建管道,包括代码签名、安装程序和构件发布。

条件:node.js 版本 16.4.0 +以上

npx create-electron-app@latest my-app --template=vite
npm install --save-dev @electron-forge/plugin-vite @electron-forge/plugin-auto-unpack-natives

文档结构:

├──src
│  ├──main
│  ├──preload
│  └──renderer
├──vite.main.config.js
├──vite.renderer.config.js
├──vite.preload.config.js
├──forge.config.js
└──package.json

forge.config.js 配置:

module.exports = {
  packagerConfig: {
    asar: true,
    name: '应用名',
    icon: path.join(__dirname, './src/render/images/icon.png'),
    extraResource: [path.join(__dirname, './src/main/assets')],
  },
  makers: [
        {
          "name": "@electron-forge/maker-squirrel",
          "config": {
            "name": "electron_quick_start"
          }
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {}
        },
        {
          "name": "@electron-forge/maker-rpm",
          "config": {}
        }
  ],
  plugins: [
    {
      name: '@electron-forge/plugin-auto-unpack-natives',
      config: {},
    },
    {
      name: '@electron-forge/plugin-vite',
      config: {
        build: [
          {
            entry: 'src/main.js',
            config: 'vite.main.config.js'
          },
          {
            entry: 'src/preload.js',
            config: 'vite.preload.config.js'
          }
        ],
        renderer: [
          {
            name: 'main_window',
            config: 'vite.renderer.config.js'
          }
        ]
      }
    }
  ]
};

vite.main.config.js 配置:

import { defineConfig } from 'vite';

export default defineConfig({ build: { rollupOptions: { external: [ 'serialport', 'sqlite3' ] } } });

page.json 配置

{
  "main": ".vite/build/main.js",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish"
  }

}

总结:electron 官方推荐,配置比较复杂,node 需要16以上,可以快速的创建一个应用。

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表