如何用Electron-vue把网页打包成桌面应用

发表于 | 分类于

前言

现在国内使用比较多的前端框架主要是Vue.js，而桌面应用开发使用的则是Electron，所以，Electron的开发团队结合了Electron和vue，新出了一个能够使用Vue.js的Electron，就是Electron-vue的脚手架。上一篇文章主要讲了如何安装Electron-vue，这篇文章主要就是讲如何把Electron-vue打包成桌面应用。

安装步骤

环境安装

你要保证你已经安装了node和npm，如果没有的话，可以自行先去安装。这里不详细解释。

  1. 你已经安装了node
  2. 你已经安装了npm

你要安装好一个Electron-vue的文件，如果没有的话，可以到我之前写的Electron-vue的安装自己安装一个。

如果你已经安装好了Electron-vue，那就代表你已经安装了Electron的环境。
所以你需要在ELectron-vue的根目录下安装Electron的打包工具

1
2
npm install electron-packager --save-dev 
npm install electron-builder --save-dev

打包文件

当你安装好Electron-vue的打包环境和工具时，就可以开始打包文件了。

在Electron-vue的根目录执行Vue的打包工具

1
npm run build

执行这个命令可以把你的Electron-vue打包成一个dist文件夹，里面包含了静态文件、css、图片等。

打包配置

当你把Electron-vue打包成一个dist文件夹后，在 dist文件夹的electron文件夹里 添加一个 package.json文件，并且在里面添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
{
    "name": "名称",
    "productName": "项目名称",
    "author": "作者",
    "version": "1.1.1",//版本
    "main": "main.js",
    "description": "项目描述",
    "scripts": {
        "pack": "electron-builder --dir",
        "dist": "electron-builder",
        "postinstall": "electron-builder install-app-deps"
    },
    "build": {
        "electronVersion": "1.8.4",
        "win": {
        "requestedExecutionLevel": "highestAvailable",
        "target": [
            {
            "target": "nsis",
            "arch": [
                "x64"
            ]
            }
        ]
        },
        "appId": "项目的id,唯一id",
        "artifactName": "名称-${version}-${arch}.${ext}",
        "nsis": {
        "artifactName": "名称-${version}-${arch}.${ext}"
        },
        "publish": [
        {
            "provider": "generic",
            "url": "服务器最新安装包的位置"
        }
        ]
    },
    "dependencies": {
        "core-js": "^2.4.1",
        "electron-updater": "^2.22.1",
        "fs-extra": "^4.0.1",
        "install.js": "^1.0.1",
        "moment": "^2.18.1",
        "moment-es6": "^1.0.0"
    }
}

执行生成桌面应用

在dist里面生成的文件夹里的根目录中，执行

1
electron-packager . "文件名" --win --out "文件夹名" --arch=x64 --electron-version=版本号

如果在当前目录下出现了一个你打包的文件夹名，则表示打包成功
进入到里面的文件夹**根目录>文件夹名>admin-win32-x64>文件名.exe，打开有内容则表示成功。

总结

在进行Electron-vue的打包过程中，遇到了许多问题，例如，打包成exe，不能够在外部文件直接执行打包命令，这样会一直报错，或者是打包成功后也打不开exe的文件，最后经历多多，才知道要先编译好vue的文件，在dist文件夹里才可以打包好exe的文件。希望以后能够少走弯路把。共勉！