Electron安装及打包exe

最新推荐文章于 2025-06-07 11:30:00 发布

大恒大

最新推荐文章于 2025-06-07 11:30:00 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： ELECTRON

本文链接：https://blog.csdn.net/kindmb/article/details/103019664

ELECTRON 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何使用Node.js和Electron构建跨平台桌面应用程序，包括安装配置、示例文件下载、基本项目结构及使用electron-packager和electron-builder进行exe和nsis安装文件打包的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、安装node.js

electron工作基于node,所以要先安装node.js。http://nodejs.cn/
nodejs安装非常简单，npm是node的模块管理工具

二、安装electron

npm install electron -g  (全局）

或

npm install --save-dev electron  （本地开发依赖）

因为网络问题，安装electron时经常卡在node install.js这里，所以要更换一下NPM的源镜像。nrm(npm registry manager )是npm的镜像源管理工具，使用这个就可以快速地在 npm 源间切换。

npm install nrm -g
nrm use taobao

切换完毕后直接重新安装electron的话,我们发现还是会卡在node install.js这个地方这是由于electron,还需要依赖node-sass、phantomjs，而node-sass又会卡住，所以我们干脆指明所有包的镜像源。这里我们需要通过编辑.npmrc（npm配置）文件来实现，这个文件一般在你的用户目录下。编辑如下：

registry=https://registry.npm.taobao.org    /*如果你已经切换至淘宝源，那么这行在你编辑文件前就已经存在*/
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjs
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/

然后在项目目录下，用管理员的cmd（普通CMD可能会出现权限故障）命令执行下面安装命令就OK了

npm install --save-dev electron  （本地开发依赖）

如果node install.js出现下面的错误：

UnhandledPromiseRejectionWarning: Error: EPERM: operation not permitted, lstat 'C:\Users\85832\AppData\Local\Temp\electron-download-JQfyv4\electron-v7.??-win32-x64.zip'

问题出在淘宝的镜像上，
可以强制降一下electron的版本

npm install --save-dev electron@6.1.0

或把.npmr改一下

ELECTRON_MIRROR=https://cdn.npm.taobao.org/dist/electron/

四、下载electron示例文件

git clone https://github.com/electron/electron-quick-start
在electron-quick-start目录下命令行执行
npm install
此命令会依据package.json中的配置，将项目依赖的模块下载到当前目录里
npm start
启动软件，弹出一个窗口

关于ELECTRON项目的说明：

一个最基本的ELECTRON项目一般包括以下文件
your-app/
├── package.json
├── main.js
└── index.html
这也是一个典型的node项目，package.json是程序入口，示例内容如下

{
  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js",
  **"scripts": {
    "start": "node ."
  }**
}

start指明了入口要启动的模块，
所以要把node替换成electron，用electron替代node去运行main.js
main.js:

const { app, BrowserWindow } = require('electron') //加载模块
function createWindow () {   
  // 创建浏览器窗口
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  // 加载index.html文件
  win.loadFile('index.html')
}
app.on('ready', createWindow)

系统自动调用electron解释执行main.js，打开electron模拟窗口，并加载index.html

五、使用electron-packager打包成exe

打包方式一：不带参打包

全局安装打包神器electron-packager
cnpm install electron-packager -g
开始打包
cd到electron-quick-start文件夹
electron-packager .
这一步可能会很慢，因为要下载一些预编译文件，据说可以设置一下镜像：
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
打包成功，在当前目录下生成一个新的文件夹
点击其中的exe，即可启动桌面程序：

打包方式二：直接在命令中设置参数打包

electron-packager --platform= --arch= [optional flags…]
命令说明：
sourcedir：项目源文件所在路径（唯一的必须参数）
appname：项目名称（直接使用package.json文件中的name属性更方便）
platform：要构建哪个平台的应用（Windows、Mac 还是 Linux）
arch：决定了使用 x86 （ia32）还是 x64（x64），还是两个架构都用
optional options：可选选项
一个命令举例：
electron-packager . myappname --out buildDir --arch=x64 --overwrite --ignore=node_modules
说明：

electron-packager . 应用名称 --out 输出文件夹 --arch=x64 --overwrite --ignore=node_modules

打包方式三：在package.json文件中配置参数打包

“scripts”: {
“start”: “electron .”,
“packager”: “electron-packager . fukaiitapp --out fukaiitapp --arch=x64 --overwrite --ignore=node_modules”
}
然后便可运行命令cnpm run-script packager进行打包
使用这种方式时，package.json文件中的name属性不能含有中文和空格等特殊字符。

PS：还可以使用asar对resources文件进行简单加密

打包方式四：用electron-builder打包成nsis安装文件

全局安装electron-builder
npm install electron-builder -g
在项目目录下安装electron
npm install electron
打包：
electron-builder .
生成dist目录，里面有安装包，
electron-builder 还可以根据配置文件打包，打成不同平台的文件