使用 Electron 打包前端代码将页面打包成桌面exe应用

最新推荐文章于 2024-07-10 22:21:40 发布

汪汪思密达

最新推荐文章于 2024-07-10 22:21:40 发布

阅读量274

点赞数 6

文章标签：前端 electron javascript

本文链接：https://blog.csdn.net/bwxt123/article/details/139954623

版权

使用 Electron 打包前端代码将页面打包成桌面exe应用

说明：1.以下是教程可以自己尝试熟悉node环境以及Electron 等打包环境
2. 1提供模板只需要下载运行npm install
2.2然后放置自己的index和static等文件
2.3然后npm run dist打包即可
git仓库地址自行下载

1.安装 Node.js 和 npm

首先，需要确保你已经安装了Node.js和npm（Node.js包管理器）。可以通过Node.js官网下载并安装。

2.创建项目目录

在你的工作目录中创建一个新的目录，并在该目录下初始化一个新的npm项目：

mkdir my-electron-app
cd my-electron-app
npm init -y

3.安装 Electron

通过npm安装Electron：

npm install electron --save-dev

4.设置项目结构

创建以下目录和文件结构：

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

5.配置 main.js

main.js 是Electron应用的主进程文件。这里是一个示例：

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });

  mainWindow.loadFile('index.html');
}

app.whenReady().then(() => {
  createWindow();

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

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

6.创建 index.html

index.html 是你的前端代码入口文件。你可以将你现有的前端代码放入这个文件中。这里是一个简单的示例：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Electron App</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is a simple Electron application.</p>
  <!-- Include your front-end code here -->
</body>
</html>

7.修改 package.json

在package.json中添加启动脚本，使其包括Electron启动命令：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^latest-version"
  }
}

8.运行应用

现在，你可以通过以下命令启动你的Electron应用：

npm start

打包应用

要将应用打包成可分发的形式，可以使用Electron Packager或Electron Builder。

一、使用 Electron Packager

1.安装Electron Packager：

npm install electron-packager --save-dev

2.创建打包脚本：

在package.json中添加一个打包脚本：

{
  "scripts": {
    "start": "electron .",
    "pack": "electron-packager . MyElectronApp --platform=win32 --arch=x64 --out=dist"
  }
}

3.运行打包命令：

npm run pack

二、使用 Electron Builder

1.安装Electron Builder：

npm install electron-builder --save-dev

配置package.json以使用Electron Builder：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "build": {
    "appId": "com.example.myapp",
    "win": {
      "target": "nsis"
    },
    "mac": {
      "target": "dmg"
    }
  },
  "devDependencies": {
    "electron": "^latest-version",
    "electron-builder": "^latest-version"
  }
}