利用nativefier和electron-winstaller实现将前端网站打包成桌面程序exe文件。_nativefier electron

1、首先利用nativefier将前端页面包装成客户端桌面程序。

下载 nativefier

npm install nativefier -g
1

然后运行

nativefier https://www.baidu.com/
1

你就可以得到一个文件夹里边找到exe文件就是打包好的百度客户端。

当然我们也可以将配置项放在文件中方便复用和配置多个参数，
新建你的.js文件写入以下代码

var nativefier = require('nativefier').default;

// possible options, defaults unless specified otherwise
var options = {
    name: '', // 客户端名称
    targetUrl: '', // 你需要将哪个网址打包
    // platform: 'darwin', // defaults to the current system
    arch: 'x64', // defaults to the current system
    version: '1.0.0',
    out: '.',
    overwrite: false,
    asar: false, // see conceal
    icon: './icon.ico',    
    counter: false,
    bounce: false,
    width: 1280,
    height: 800,
    showMenuBar: false,
    fastQuit: false,
    userAgent: 'AGP-LSJ', // will infer a default for your current system
    ignoreCertificate: false,
    ignoreGpuBlacklist: false,
    enableEs3Apis: false,
    insecure: false,
    honest: false,
    zoom: 1.0,
    singleInstance: false,
    clearCache: false,
    fileDownloadOptions: {
      saveAs: true // always show "Save As" dialog
    },
    internalUrls:'(.*?\/pcClient)|(.*?\/user/logout\.php)',
    processEnvs: {
      "GOOGLE_API_KEY": "<your-google-api-key>"
    }
};

nativefier(options, function(error, appPath) {
    if (error) {
        console.error(error);
        return;
    }
    console.log('App has been nativefied to', appPath);
});
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

更多的api请查看官网。
https://github.com/jiahaog/nativefier/blob/master/docs/api.md

如此这般我们就能得到打包好的客户端文件夹我们已经成功了一多半。

2、利用electron-winstaller将打包好的文件夹打包成exe文件

首先还是下载electron-winstaller

	npm install --save-dev electron-winstaller
1

接下来创建你的.js配置文件配置一下代码

var electronInstaller = require('electron-winstaller');
var path = require("path");
resultPromise = electronInstaller.createWindowsInstaller({
    appDirectory: path.join(''), //刚才生成打包文件的路径
    outputDirectory: path.join('./app'), //输出路径
    authors: 'lsj', // 作者名称
    exe: 'testClient.exe', //在appDirectory寻找exe的名字
    noMsi: true, //不需要mis![这里写图片描述](https://img-blog.csdn.net/20180712225817503?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjI2MTEz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
    setupIcon:'./icon.ico', //生成的exe文件的图标文件地址
    setupExe:'testClient-setup-win64-1.0.0.exe',
    title:'test', 
  });

resultPromise.then(() => console.log("It worked!"), (e) => console.log(`No dice: ${e.message}`));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

更多配置项前往官网查看
https://github.com/electron/windows-installer

生成exe文件之后我们就可以点击安装，会在桌面生成一个桌面快捷方式。

到此大功告成！