electron打包成exe的方法

图集1/3

正文 7501字数 217,578阅读

一、安装 Electron

创建一个空文件夹（文件夹的名字和路径应该尽量避开空格和一些非法字符的干扰，比如我用的是 D:\UnrealProjects\EleProj ）。

打开 EleProj 文件夹，在此处打开控制台，输入以下命令：

npm init

Run code

Cut to clipboard

init 初始化命令会提示我们初始化一些项目配置，并已给出一部分默认值，这里我们用默认的一路回车就好。

此时，文件夹中应该会多出一个名为 package.json 的文件，它大概长这个样子：

{
  "name": "eleproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Run code

Cut to clipboard

接着在控制台输入命令：

npm install electron --save-dev

Run code

Cut to clipboard

该命令会安装 Electron。安装过程大概率会非常耗时，并且遇到一些报错，例如 ELIFECYCLE、ECONNRESET 等，这基本都是网络问题，使用魔法后就能顺利安装了。

编辑 package.json 文件，在 scripts 字段下增加一条 start 命令：

{
  ...
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  ...
}

Run code

Cut to clipboard

start 命令能在开发模式下运行 Electron，让我们赶紧试试吧~

在控制台输入命令以运行 Electron：

npm start

Run code

Cut to clipboard

根据报错，我们可以在 package.json 文件中找到如下属性：

{
  ...
  "main": "index.js",
  ...
}

Run code

Cut to clipboard

main 属性配置的值是 Electron 应用程序的入口文件，因此，我们需要...↓↓↓

在项目的根目录下创建一个名为 index.js 的文件，并写入以下代码：

// app模块控制应用程序的事件生命周期。
// BrowserWindow模块创建和管理应用程序窗口。
const { app, BrowserWindow } = require('electron')

/** 创建窗口 */
const createWindow = () => {
    const mainWindow = new BrowserWindow()
}

// 这段程序将会在 Electron 结束初始化和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
    // 创建窗口
    createWindow()
})

// 当所有窗口都被关闭的时候退出程序。
app.on('window-all-closed', () => {
    app.quit()
})

Run code

Cut to clipboard

代码相对简单，注释我也写的比较清楚了，这里就不再赘述。

再次运行 Electron，看看效果吧~

打包到 exe

最快捷的打包方式是使用 Electron Forge，它非常的简单易用。

安装 Electron Forge，在控制台输入以下命令：

npm install --save-dev @electron-forge/cli

Run code

Cut to clipboard

使用其 import 命令设置 Forge 的脚手架：

npx electron-forge import

Run code

Cut to clipboard

使用 Forge 的 make 命令来创建可分发的应用程序：

npm run make

Run code

Cut to clipboard

啊哦，又报错了

不难看出，上图黄框中即为该报错的关键信息。

在初始化项目配置时，author 和 description 属性是没有默认值的。
现在，我们再次打开 package.json，为上述两个属性赋值。

{
  ...
  "description": "CocosCreator & Steam Demo",
  ...
  "author": "Thomac",
  ...
}

Run code

Cut to clipboard

重新执行 Forge 的 make 命令。
这次不会再报错啦，而我们要的 exe 就在out/eleproj-win32-x64目录下。

一些小瑕疵的处理
自定义 exe 文件的名字与图标
修改 package.json 中 packagerConfig 相关配置，
新增 name 和 icon 属性，icon图片自己准备好。

{
  ...
  "config": {
    "forge": {
      "packagerConfig": {
        "name": "Demo",
        "icon": "icon.ico"
      },
      ...
    }
  }
}

Run code

Cut to clipboard

窗口相关设置
修改 index.js 代码，在创建 BrowserWindow 对象时传入参数对象进行自定义。

/** 创建窗口 */
const createWindow = () => {
    const mainWindow = new BrowserWindow({
        width: 1336,        // 整数型 (可选) - 窗口的宽度（以像素为单位）。 默认值为 800。
        height: 768,        // 整数型 (可选) - 窗口的高度（以像素为单位）。 默认值为 600。
        resizable: false,   // boolean (可选) - 窗口大小是否可调整。 默认值为 true。
        fullscreen: true,   // boolean (可选) - 窗口是否全屏. 当明确设置为 false 时，在 macOS 上全屏的按钮将被隐藏或禁用. 默认值为 false.
        title: "Demo",      // string(可选) - 默认窗口标题 默认为"Electron"。 如果由loadURL()加载的HTML文件中含有标签<title>，此属性将被忽略。
        // icon: "",        // (NativeImage | string) (可选) - 窗口图标。 在 Windows 上推荐使用 ICO 图标来获得最佳的视觉效果, 默认使用可执行文件的图标.
        frame: false,       // boolean (可选) - 设置为 false 时可以创建一个无边框窗口 默认值为 true。
    })
    mainWindow.removeMenu() // 删除窗口的菜单栏。

    // 加载 index.html
    mainWindow.loadFile('web-mobile/index.html')
}

Run code

Cut to clipboard

更多窗口自定义设置，可参考其官方文档
CocosCreator & Steam 开发手记（1）：Electron 打包 exe
Electron 如何打包生成exe安装包，注意是安装包。

windows 10下的kiosk模式
windows 10下的kiosk模式可以保证windows 10 开机自动运行某个程序，且全屏，除了按alt + del + ctrl组合键退出外，按鼠标、键盘不能见到任何window系统下的任何界面，
这模式专门这对pos机，超市收银，路边广告摊开发的，开机自启动，
除了按alt+del+ctrl退出外，按其它任何键，鼠标都不能看见windows下的其它东西。但是只有win10 家庭版才有此功能，企业版、win7 没发现该功能。
具体可以参考《Kiosk模式是什么？win10如何启用Kiosk模式？》

BrowserView嵌入网页

在主线程中用BrowserView嵌入网页
打开根目录下打开main.js,直接引入并使用BrowserView就可以实现键入网页到应用中。

  var BrowserView = electron.BrowserView; // 引入BrowserView
    var view = new BrowserView();   //new出对象
    mainWindow.setBrowserView(view);    // 在主窗口中设置view可用
    view.setBounds({    //  定义view的具体样式和位置
        x:0,
        y:120,
        width:500,
        height:500
    })
    view.webContents.loadURL('https://blog.csdn.net/m0_46171043?spm=1001.2101.3001.5343');  //view载入的页面

Run code

Cut to clipboard

electron 打包成exe两种方式，以及常见问题

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "win": "electron-packager . Bcreat --platform=win32 --arch=x64 --icon=icon.ico --out=./dlist --asar --app-version=0.0.1",
    "winexe": "electron-builder --win --x64"
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "build": {
    "appId": "com.bcreatexe.app",
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./icon.ico",
      "uninstallerIcon": "./icon.ico",
      "installerHeaderIcon": "./icon.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true
    },
    "win": {
      "target": "nsis"
    }
  },
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron-builder": "^22.10.5",
    "electron": "^12.0.5"
  },
  "dependencies": {
    "electron-packager": "^15.2.0"
  }
}

Run code

Cut to clipboard

将上面代码修改根目录package.json文件，注意你改成你自己的项目名称~

常用electron打包方式分两种
一、electron-packager
含义就打包成直接运行包，可以直接打开exe运行

二、electron-builder
含义就是打包成安装版，可以自定义安装路径，安装图标，创建桌面快捷方式等，运行exe，打开开始安装

运行方式：npm run win （就是运行electron-packager打包方式）、npm run winexe （就是运行electron-builder打包方式），具体的代码在上面代码scripts参数里面~

解决electron打包慢

1.安装electron-builder

npm install electron-builder --save-dev

Run code

Cut to clipboard

2.更改npm的源和版本设置
这个设置可以在你执行安装依赖之前就设置好

//你可以使用终端输入命令
npm set ELECTRON\_MIRROR\=https://npm.taobao.org/mirrors/electron/
npm set ELECTRON\_CUSTOM\_DIR\=9.0.0

Run code

Cut to clipboard

或者直接在C:\user\xxx路径下搜索.npmrc然后打开文件进行修改

注意:这个版本号需要和你package.json中的版本号相同

3.增加package.json里的设置

"build": {
	"appId": "com.xxx.app",
	"mac": {
		"target": ["dmg","zip"]
	},

	"win": {
		"target": ["nsis","zip"]
	}
},
"scripts": {
	"dist": "electron-builder --win --x64"
},

Run code

Cut to clipboard

这里默认是打windows 64位的包.
如果打其他平台的包，只需要更改dist对应的命令，大概怎么配置请百度builder的配置
html5怎么好卡,解决electron打包慢，卡

使用WinRar软件制作程序安装包
electron打包生成exe程序
electron打包生成exe文件
electron打包成exe的方法

lizhenqiu blog

electron打包成exe的方法

相关日志

暂无评论 »

留下評論