最近学习了下前端（js还没怎么学）

在了解js的途中了解到了Electron

早闻其大名于是就来尝试一下

Electron的安装与配置#

node.js#

这是node.js的官网，需要下载node.js才可以使用

检查安装

1
node -v
2
npm -v

git#

https://git-scm.com/downloads/win

需要下载这两者

检查安装

1
git --version

换源#

由于一些原因，npm，pip以及各类Linux的包管在国内的速度可以说几乎为0

那么就需要国内的镜像站进行下载

npm 官方原始镜像网址是：https://registry.npmjs.org/ 淘宝镜像：http://registry.npmmirror.com

1
 npm config set registry https://registry.npmmirror.com

进行换源

创建工作目录以及初始化#

然后随便找个地方新建一个文件夹，并且在此目录打开git bash进行初始化

1
mkdir test #test是文件夹名称
2
cd test
3
npm init #进行初始化，有让你填写的东西可以直接回车跳过

然后下载electron

1
npm install -g electron
2
#或者说如果无法下载可以线通过淘宝源下载cnpm
3
npm install -g cnpm --registry=https://registry.npmmirror.com
4
cnpm install -g electron

test文件夹会生成一个package.json 文件

1
{
2
  "name": "test", # 你项目的名称（必填！）
3
  "version": "1.0.0", # 版本（必填！）
4
  "description": "", # 描述（必填！）
5
  "license": "ISC", # 协议
6
  "author": "", #作者（必填！）
7
  "type": "commonjs",
8
  "main": "index.js", # 程序入口
9
  "scripts": {
10
    "test": "echo \"Error: no test specified\" && exit 1"
11
  }
12
}

在此目录下创建一个文件inex.js

1
// 导入模块
2
const { app, BrowserWindow } = require('electron')
3

4
app.on('ready', () => {
5
  //当app准备好后，执行createWindow创建窗口
6
  const win = new BrowserWindow({
7
    width: 800, //窗口宽度
8
    height: 600, //窗口高度
9
    autoHideMenuBar: true, //自动隐藏菜单档
10
    alwaysOnTop: true, //置顶
11
    x: 100, //窗口位置x坐标
12
    y: 100 //窗口位置y坐标
13
  })
14
  //加载一个页面
15
  win.loadFile('') //此处写你存html的路径

然后git bash里输入

1
npm start

你就会发现

1
$ npm start
2
npm error Missing script: "start"
3
npm error
4
npm error Did you mean one of these?
5
npm error   npm star # Mark your favorite packages
6
npm error   npm stars # View packages marked as favorites
7
npm error
8
npm error To see a list of scripts, run:
9
npm error   npm run
10
npm error A complete log of this run can be found in: C:\Users\1\AppData\Local\npm-cache\_logs\2025-02-04T15_17_29_225Z-debug-0.log

报错，显示为缺失start

让我们回到刚刚的package.js文件，找到

1
"scripts": {
2
    "test": "echo \"Error: no test specified\" && exit 1"
3
}

并且添加一个start，修改如下

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

这样就能成功运行了

打包#

{% tabs 分类 1 %}

electron-builder是electron社区开发的打包工具，用起来相对简便

electron官方的打包工具(本文不提及使用方法)

{% endtabs %}

electron-builder安装起来很简单（前提是你得有一个良好的网络环境）

1
npm install --save-dev electron-builder
2
# 或者
3
cnpm install --save-dev electron-builder

继续去package.js里面

添加一个build

1
"build": {
2
    "productName":"xxxx",//项目名 这也是生成的exe文件的前缀名
3
    "appId": "com.leon.xxxxx",//包名
4
    "copyright":"xxxx",//版权  信息
5
    "directories": { // 输出文件夹
6
      "output": "build"
7
    },
8
    "nsis": {
9
      "oneClick": false, // 是否一键安装
10
      "allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
11
      "allowToChangeInstallationDirectory": true, // 允许修改安装目录
12
      "installerIcon": "./build/icons/aaa.ico",// 安装图标
13
      "uninstallerIcon": "./build/icons/bbb.ico",//卸载图标
14
      "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
15
      "createDesktopShortcut": true, // 创建桌面图标
16
      "createStartMenuShortcut": true,// 创建开始菜单图标
17
      "shortcutName": "xxxx", // 图标名称
18
      "include": "build/script/installer.nsh", // 包含的自定义nsis脚本
19
    },
20
    "publish": [
21
      {
22
        "provider": "generic", // 服务器提供商 也可以是GitHub等等
23
        "url": "http://xxxxx/" // 服务器地址
24
      }
25
    ],
26
    "files": [
27
      "dist/electron/**/*"
28
    ],
29
    "dmg": {
30
      "contents": [
31
        {
32
          "x": 410,
33
          "y": 150,
34
          "type": "link",
35
          "path": "/Applications"
36
        },
37
        {
38
          "x": 130,
39
          "y": 150,
40
          "type": "file"
41
        }
42
      ]
43
    },
44
    "mac": {
45
      "icon": "build/icons/icon.icns"
46
    },
47
    "win": {
48
      "icon": "build/icons/aims.ico",
49
      "target": [
50
        {
51
          "target": "nsis",
52
          "arch": [
53
            "ia32"
54
          ]
55
        }
56
      ]
57
    },
58
    "linux": {
59
      "icon": "build/icons"
60
    }
61
  }

详情请见Electron-builder打包详解 - 简书

当然，还要在script里添加进行build的命令

1
"scripts": {
2
   "start": "electron .",
3
   "test": "echo \"Error: no test specified\" && exit 1",
4
   "build": "electron-builder"
5
  }

然后运行

1
npm run build

即可打包