electron打包基本教程

从0开始搭建

概要

将html打包成桌面的主流有electron和nwjs,nwjs更加简单,但是使用效果不如electron,electron打包比较麻烦,但是效果比较好,反正各有优势和缺点

步骤

基础软件

  1. nodejs
    官网下载
    阿里下载
shell 复制代码
# 验证版本
node -v
v22.13.0
  1. npm
    nodejs自带npm,直接查看版本
shell 复制代码
npm -v
10.9.2
  1. cnpm
    国内用户需安装这个,你懂的
shell 复制代码
#使用 npm 全局安装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
  1. 生成项目
  • 创建目录 my-electron-app
  • 进入目录,命令创建
shell 复制代码
cnpm init -y
# -y 参数表示使用默认配置快速初始化,免去手动回答一系列问题的步骤。
  1. 添加依赖
shell 复制代码
# 用于开发
cnpm install electron --save-dev
# 用于打包
cnpm install electron-builder --save-dev
  1. 指定国内地址
    打包时会到github下载很多文件,如果连接github不顺畅,可以指定国内地址
js 复制代码
  "build": {
  	"electronDownload": {
  	  "mirror": "https://registry.npmmirror.com/-/binary/electron/"
  	},
    "appId": "com.cn.app",
    "mac": {
      "target": "dmg"
    },
    "win": {
      "target": "nsis"
    },
    "linux": {
      "target": "AppImage"
    }
  },
  1. 完整项目结构
  • app:需要打包的html网站,这里测试添加了一个简单的html单文件
  • dist:打包后文件目录
  • node_modules:node依赖包,自动生成的
  • main.js:项目主入口,package.json中指定
  • package.json:项目结构

main.js

js 复制代码
const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });

    // win.loadURL('https://github.com');
	win.loadFile(path.join(__dirname, 'app', 'index.html'));
}

app.whenReady().then(createWindow);

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

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

package.json

js 复制代码
{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "build": "electron-builder"
  },
  "build": {
  	"electronDownload": {
  	  "mirror": "https://registry.npmmirror.com/-/binary/electron/"
  	},
    "appId": "com.cn.app",
    "mac": {
      "target": "dmg"
    },
    "win": {
      "target": "nsis"
    },
    "linux": {
      "target": "AppImage"
    }
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^34.2.0",
	"electron-builder": "^25.1.8"
  }
}

运行项目

js 复制代码
# cmd命令
cnpm run start

运行后出现浏览器,里面是app包含的网站

打包项目

js 复制代码
cnpm run build
  • 打包中会出现访问winCodeSign(github)失败,这个主要用于软件签名,防止软件被篡改,如果签名失败也会打包项目,但是项目名字是win-unpacked,意思未签名打包目录
  • 打开win-unpacked

注意事项

  1. 远程打包失败,可以下载electron到本地,指定本地打包
    https://npmmirror.com/mirrors/electron/
    更多方法豆包[electron国内下载打包方法]
相关推荐
mCell3 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip3 小时前
Node.js 子进程:child_process
前端·javascript
excel6 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel7 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼8 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping8 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙9 小时前
[译] Composition in CSS
前端·css
白水清风9 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix9 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278009 小时前
new、原型和原型链浅析
前端·javascript