网站首页 > 博客文章 正文
搭建一个 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以上,可以快速的创建一个应用。
猜你喜欢
- 2025-08-02 强大的可视化流程图编辑神器 — LogicFlow
- 2025-08-02 前端框架太卷了!字节企业级框架Arco Design Mobile开源了
- 2025-08-02 Vue独立组件——11个最佳Vue.js日期选择器组件
- 2025-08-02 PouchDB - 免费开源的 JavaScript 数据库,用于离线保存数据
- 2025-08-02 安装Vue.js,搭建Vue环境
- 2025-08-02 Node.js 原生支持 TypeScript?开发者需要了解的一切
- 2025-08-02 小白都看得懂的Vue3.0语法教程-01-框架搭建
- 2025-08-02 Gulp 介绍与安装
- 2025-08-02 用户说 | 手把手体验通义灵码 2.0 AI 程序员如何让我进阶“架构师”?
- 2025-08-02 Vue应用性能优化实战:8 个提升页面加载速度的关键策略
你 发表评论:
欢迎- 08-03 Docker 命令入门实战:搞懂这些才算真正入门!
- 08-03Docker 常用命令分类汇总
- 08-03docker常用命令大全,看这一篇就够了
- 08-03Docker命令大全详解(39个常用命令)
- 08-03Docker 常用命令手册
- 08-03Docker命令最全详解(39个最常用命令)
- 08-03Docker命令最全详解(29个最常用命令)
- 08-03C++语法进阶-字符:字符变量(char)
- 最近发表
- 标签列表
-
- ifneq (61)
- 字符串长度在线 (61)
- googlecloud (64)
- flutterrun (59)
- powershellfor (73)
- messagesource (71)
- plsql64位 (73)
- vueproxytable (64)
- npminstallsave (63)
- promise.race (63)
- 2019cad序列号和密钥激活码 (62)
- window.performance (66)
- qt删除文件夹 (72)
- mysqlcaching_sha2_password (64)
- nacos启动失败 (64)
- ssh-add (70)
- yarnnode (62)
- abstractqueuedsynchronizer (64)
- source~/.bashrc没有那个文件或目录 (65)
- springboot整合activiti工作流 (70)
- jmeter插件下载 (61)
- 抓包分析 (60)
- idea创建mavenweb项目 (65)
- qcombobox样式表 (68)
- pastemac (61)
本文暂时没有评论,来添加一个吧(●'◡'●)