Electron桌面应用打包流程详情

最新推荐文章于 2025-07-02 00:02:07 发布

ML_Qi

最新推荐文章于 2025-07-02 00:02:07 发布

阅读量1.5w

点赞数 10

CC 4.0 BY-SA版权

分类专栏：桌面应用

本文链接：https://blog.youkuaiyun.com/qq_33323731/article/details/80492191

一. 准备工作

1.npm的安装需要下载node.js，安装完node.js之后npm自然会有。

2. 首先，我们要安装electron-prebuilt，它是一个npm模块，因此我们可以使用Npm来进行安装，它是一个electron的预编译版本。

    npm install -g electron-prebuilt

3. 接下来安装electron-packager ，它也是一个npm模块，是一个用于打包electron应用的工具

    npm install -g electron-packager

二. 创建一个应用

创建一个electron应用。我们现在仅仅需要3个文件。

bigDataPC/    
       ├── package.json    
       ├── main.js    
       └── index.html

index.html使我们想要显示的页面，main.js为此应用的入口，package.json为npm项目的配置文件。

1.新建一个名为myApp的文件夹

2.进入项目目录进行初始化

    cd myApp

    npm init

3.新建一个package.json，内容如下：

   {
      "name": "zzh",
      "version": "0.0.1",
      "description": "a simple application",
      "main": "main.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "electron ."  //这边是自己添加上去的，自动生成的，scripts下面只有test.
      },
      "author": "zzh",
      "license": "ISC"
    }

4.新建一个index.html, 内容如下：

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <h1>hello electron</h1>
    </body>
    </html>

5. 新建一个main.js, 内容如下：（main.js的文件名对应package.json中main的值）