首发掘金：https://juejin.im/post/5c85b08ae51d453a476237de

electron小细节

解决Electron命令行中文出现乱码

"scripts": {
    "start": "chcp 65001 && electron ."
  },

Electron不支持prompt的替代方案

• 使用开源库：smalltalk
• 手写弹窗样式

chromium在electron下会异常崩溃退出

• 描述：发现electron与木偶人有点水土不服，没有封装成electron之前是可以顺利运行程序，加上electron之后，需要修改的地方有点多，甚至报错，运行下不去。
• 解决：去掉页面等待

// 等待页面加载出来
await page.waitForNavigation({
    waitUntil: 'load'
});

调整页面默认等待时间

• 描述：imeoutError: Navigation Timeout Exceeded: 30000ms exceeded
• 解决：禁用默认超时

// 打开浏览器
browser = await puppeteer.launch({
    headless: false,
    timeout: 0
});

page.setDefaultNavigationTimeout(0);

Electron 将网页打包成 exe 可执行文件

在electron的构建体系中，打包这个概念特别的容易混淆。这里有很多种结果都是可以说是打包，但是打包的程度是完全不同的，这也就决定了不同的打包场景。本文中，asar这个打包，是个最最最最最小的打包概念，而且这个包，仅仅是对resource/app目录的封装，让人们不是那么容易看到你写的代码结果而已。

在封装成可执行的exe文件时候，遇到了一些问题，如下：

• 如何配置package.json文件，使其能够自动化打包？
• node_modules依赖找不到
• openssl可执行路径出错
• puppeteer 找不到浏览器路径
• 文件存放路径问题
• 如何打包或者解压asar文件？

如何配置package.json文件，使其能够自动化打包？

配置package.json，核心命令为：

"scripts"：{
    "package": "electron-packager ./ AutoCer --platform=win32  --arch=x64 --icon=./tool.ico --out=./dist --electron-version=4.0.6 --overwrite"
}

• ./：打包当前目录所有内容
• --out=./dist：将打包内容输出到当前目录的dist文件夹
• AutoCer：你打包后应用的名称
• --icon：你打包后应用的图标
• --electron-version：这个版本填写你自己对应的版本，否则会报错，找不到对应版本
• --overwrite：每次打包强制覆盖输出

package.json完整配置如下：

{
  "name": "autoCer",
  "version": "1.0.0",
  "description": "自动创建开发者证书、下载开发者证书和描述文件，转成p12文件",
  "main": "main.js",
  "scripts": {
    "start": "chcp 65001 && electron .",
    "package": "electron-packager ./ AutoCer --platform=win32  --arch=x64 --icon=./tool.ico --out=./dist --app-version=1.0.0 --overwrite"
  },
  "keywords": [
    "Electron",
    "quick",
    "start",
    "p12",
    "crs"
  ],
  "author": "",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^4.0.6",
    "electron-packager": "^13.1.1"
  },
  "dependencies": {
    "chalk": "^2.4.2",
    "commander": "^2.19.0",
    "fs-extra": "^7.0.1",
    "open-file-explorer": "^1.0.2",
    "plist": "^3.0.1",
    "puppeteer": "^1.11.0"
  }
}

node_modules依赖找不到？

为什么在没有打包前一切运行正常，打包后就会报找不到node_modules中一些第三方资源的路径，原来是在配置package.json的时候出现了问题，应当把需要依赖第三方资源的从devDependencies调整到dependencies，而又不想把electron、electron-packager打包进应用，则留在devDependencies中即可，配置如下：

package.json：

"devDependencies": {
    "electron": "^4.0.6",
    "electron-packager": "^13.1.1"
},
"dependencies": {
    "chalk": "^2.4.2",
    "commander": "^2.19.0",
    "fs-extra": "^7.0.1",
    "open-file-explorer": "^1.0.2",
    "plist": "^3.0.1",
    "puppeteer": "^1.11.0"
}

配置package.json后，进入项目目录，运行npm run package 即可。

openssl可执行路径出错

打包后找不到openssl的路径，导致失败，所以这里需要使用openssl的绝对路径，可将OpenSSL-Win32文件夹手动移动到打完包之后的目录下，和resources同级即可，最后修改一下OpenSSL-Win32所在的位置，如下：

let openssl = path.join(__dirname, "..", ".."，"..","OpenSSL-Win32", "bin", "openssl.exe");

puppeteer 找不到浏览器路径

打包后找不到chrome.exe路径，导致浏览器启动失败，这里将node_modules中puppeteer包里面的.local-chromium整个文件夹手动剪切到打完包之后的目录下，和resources同级即可，最后修改一下executablePath指定Chromium的位置，如下：

let ChromiumPath = path.join(__dirname, "..", ".."，"..",".local-chromium", "win64-624492", "chrome-win","chrome.exe");

// 打开浏览器
const browser = await puppeteer.launch({
    headless: false,
    timeout: 0，
    executablePath：ChromiumPath
});

文件存放路径问题

不能写入项目文件，只能读取文件，可存放到系统临时目录，如下

const os = require('os');
let tempDir = path.join(os.tmpdir(), "AutoCerTemp");

如何打包或者解压asar文件

当运行npm run package 之后，在项目当前目录下会输出dist/AutoCer-win32-x64等打包后的工程，此时我们进入dist/AutoCer-win32-x64/resources，会看到两个文件，一个是app文件夹，一个是
electron.asar文件，此刻我们需要进行最后一步，就是将app文件打包成asar，在当前目录下运行以下命令：

打包 asar 命令：

asar p app app.asar
asar pack app app.asar

打完asar包之后，可以去点击AutoCer.exe启动你的项目了。

如果你想看下asar里面是什么内容，可以使用解压命令。

asar e app.asar app
asar extract app.asar app