electron基本配置

最新推荐文章于 2025-06-09 09:31:28 发布

原创最新推荐文章于 2025-06-09 09:31:28 发布 · 3k 阅读

0 ·

CC 4.0 BY-SA版权

electron 专栏收录该内容

4 篇文章

订阅专栏

使用Electron框架，前端开发者可以利用HTML、CSS和JavaScript构建跨平台的桌面应用。本文介绍了Electron的基本配置，包括如何安装、设置package.json和main.js文件，以及如何进行应用打包。

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

Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。

前端又打开了一扇通向新世界的大门，通过Electron前端就可以开发桌面应用啦。
先来了解一下框架的基本配置。
安装

npm install electron@6.1.0 -g --save
npm install electron-packager -g --save

后者是electron的打包工具。
最新版本的electron可能会安装失败。
和webpack打包很像，需要package.json和一个入口的js文件。
package.json
start是不打包在测试环境运行，version是查看electron的库版本（这和安装时候的6.1.0版本不一样），package这个比较重要，是专门用来打包的命令其中test是项目的名字，--win是打包windows平台，--out是打包生成的位置，--arch是打包成64位（x64）或32位（ia32），--electron-version是对应的刚才用version查出来的版本库，--icon是logo图标

{
  "name": "test",
  "version": "0.0.1",
  "description": "a simple application",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "version": "electron -v",
    "package": "electron-packager . test --win --out ./test --arch=x64 --electron-version=1.6.15 --icon=logo.ico"
  },
  "author": "test",
  "license": "ISC",
  "dependencies": {
    "iconv-lite": "^0.5.0"
  }
}

main.js
这里做工程中相关的配置，包括窗口大小和一些相关的类似生命周期的逻辑处理

const {app,BrowserWindow,ipcMain} = require('electron');
let win;
let windowConfig = {
  width: 750,
  height: 712,
  webPreferences: {
    javascript: true,
    plugins: true,
    nodeIntegration: true, // 是否集成 Nodejs
    webSecurity: false,
  }
};
function createWindow() {
  win = new BrowserWindow(windowConfig);
  win.loadURL(`file://${__dirname}/index.html`);//关联的页面文件
  //开启调试工具
  win.webContents.openDevTools();
  win.on('close', () => {
    //回收BrowserWindow对象
    win = null;
  });
  win.on('resize', () => {
    // win.reload();
  })
}

app.on('ready', createWindow);
app.on('window-all-closed', () => {
  app.quit();
});
app.on('activate', () => {
  if (win == null) {
    createWindow();
  }
})

基本的配置大体就完成了