electron笔记——前端项目转成exe

向上柚子茶
208 阅读2分钟

1、目录结构及文件内容

一个 Electron 应用的目录结构如下

your-app/ 
├── package.json 
├── main.js 
└── index.html

package.json

{ 
"name" : "your-app", 
"version" : "0.1.0", 
"main" : "main.js" 
}

main.js

var electron=require('electron')
var app = electron.app;  // 控制应用生命周期的模块。
var BrowserWindow = electron.BrowserWindow;  // 创建原生浏览器窗口的模块�

// 保持一个对于 window 对象的全局引用，不然，当 JavaScript 被 GC，
// window 会被自动地关闭
var mainWindow = null;

// 当所有窗口被关闭了，退出。
app.on('window-all-closed', function() {
  // 在 OS X 上，通常用户在明确地按下 Cmd + Q 之前
  // 应用会保持活动状态
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候
// 这个方法就被调用
app.on('ready', function() {
  // 创建浏览器窗口。
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // 加载应用的 index.html
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // 打开开发工具
  mainWindow.openDevTools();

  // 当 window 被关闭，这个事件会被触发
  mainWindow.on('closed', function() {
    // 取消引用 window 对象，如果你的应用支持多窗口的话，
    // 通常会把多个 window 对象存放在一个数组里面，
    // 但这次不是。
    mainWindow = null;
  });
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using io.js <script>document.write(process.version)</script>
    and Electron <script>document.write(process.versions['electron'])</script>.
  </body>
</html>

2、安装

全局安装electron

npm install -g electron

image.png

查看是否安装成功

electron -v

如果遇到这样的报错，是权限的问题，解决如下：

image.png

在当前的项目文件夹下操作：

  • 1、输入：get-ExecutionPolicy（此时会得到输出：Restricted）
  • 2、输入：Set-ExecutionPolicy -Scope CurrentUser
  • 3、输入：RemoteSigned
  • 4、验证是否解决问题，输入：get-ExecutionPolicy （此时若是返回RemoteSigned，问题解决）

image.png

运行项目

electron .

3、打包成exe

准备工作：

  • 1、全局安装打包工具 electron-packager 要求：Electron Packager require Node >=10.12.0
  • 2、打包前为当前app制作icon：icon.ico，256*256。制作好放入app根目录。 electron-packager打包

全局安装electron

npm install electron-packager -g

打包方式1：命令打包

 electron-packager ./ map --platform=win32 --out=release --arch=ia32 --electron-version=1.8.4 --overwrite

打包方式2：在package.json文件中配置

"scripts": {
  "start": "electron .",
  "packager": "electron-packager . fukaiitapp --out fukaiitapp --arch=x64 --overwrite --ignore=node_modules"
},

运行

npm run package

参考文章

avatar
文章
阅读
粉丝