electron入坑指南
electron 实际集成chrome浏览器和node环境, 运行你写的网页
app 基本目录结构
index.html 名称可以不是index, 这个文件与普通网页的区别是它之中要引用&script 'renderer.js'& 类似这样
main.js 必须为这个名称, 用于创建窗口和主线程的操作, 能访问node模块
renderer.js 渲染进程, 能访问被打包的node模块和浏览器
electron-vue
一开始什么都不会, 所以用这个脚手架快速弄一个项目模板肯定是最好的.
electron-vue模板项目弄好后, npm run dev 一切正常.
但当你兴高采烈的编译打包项目时, 就发现GG了. 由于墙, 无法下载...
随后就发生了一连串问题, 以下是我对每个问题找到的解决方案
electron-builder 由于网络原因无法下载
Error: connect ETIMEDOUT 52.216.65.240:443
添加以下淘宝镜像到环境变量
ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
下载二进制包到 二进制包缓存目录
macOS ~/Library/Caches/electron-builder
linux ~/.cache/electron-builder
windows %LOCALAPPDATA%\electron-builder\cache
我电脑上 二进制包缓存目录 有以下文件
windows 下
nsis-3.0.1.13
nsis-resources
nsis-resources-3.3.0
winCodeSign
winCodeSign-1.9.0
appimage-9.0.3
fpm-1.9.2-2.3.1-linux-x86_64
electron-vue 编译后运行空白
能够编译后不代表能够运行, 运行后发现一片空白, 通过暴力在renderer.js里每一行输出alert('xx')来判断哪里报错,
发现运行 require('vue') 加载vue时报错了, 但vue不是应该被webpack打包吗
于是在 webpack.renderer.config.js 配置里找到了 externals 配置, 发现vue特殊被白名单除外了, 既然被打包了怎么还找不到..
let whiteListedModules = ['vue', 'iview']
// externals 里的都将不被webpack打包
externals: [
...Object.keys(dependencies || {}).filter(d =& !whiteListedModules.includes(d))
不管这个了, 我把所有 externals 配置都注释掉, 都打包进来. 然后发现 HtmlWebpackPlugin 的 nodeModules 字段在运行时是 false
nodeModules: process.env.NODE_ENV !== 'production' ? path.resolve(__dirname, '../node_modules') : false
// 改成, 一直提供node模块的目录
nodeModules: path.resolve(__dirname, '../node_modules')
这样暴力之后, 报了另一个错误, 说什么依赖模块 vue 未找到
后台想了半天办法, 还是妥协了
设置环境变量 ELECTRON_BUILDER_ALLOW_UNRESOLVED_DEPENDENCIES=1 忽略这个报错
(后来发现正确配置时根本不会爆什么错或这警告的)
这样打包出来可以运行了. 虽然有一点大. 我也是后面才体会到为什么 electron-vue 要这么配置
electron-builder 打包配置
我经过摸索, 发现双 package.json 的形式有许多优势, 这是我现在采用的方式
开发根目录的 package.json 打包配置片段
"scripts": {
// ... 省略一些
"build:win": "electron-builder -- win",
"build:deb": "electron-builder --linux deb",
"postinstall": "electron-builder install-app-deps"
"build": {
"appId": "com.xueyou.testapp",
// 这里的产品名称将影响打包出来安装包的名称
"productName": "testapp",
"copyright": "Copyright (C) 2017 ${author}",
"directories": {
// 定义输出目录
"output": "release",
// 定义app根目录, 我的在 dist 目录里
"app": "./dist"
// 将 globa 文件匹配到的文件打包, 这里就是 将 app根目录下的所有文件打包
"files": [
"target": "nsis",
"icon": "dist/icons/icon.ico"
"linux": {
"icon": "dist/icons",
"category": "Utility"
app根目录的 package.json 打包配置片段,
注意下面的dependencies, 这很重要, 我们想在renderer.js 渲染进程访问node模块, 就必须将node模块打包,
以下的项目依赖就是你的应用能访问的node外部模块, 它会在 electron-builder install-app-deps 运行时, 在app根目录创建node_modules依赖
webpack打包renderer.js时, 要 output 配置 libraryTarget: 'commonjs2', 让输出的模块能访问node
// app 名称, 注意不是安装包的名称
"name": "checkout-counter",
// app 版本
"version": "1.0.1",
// app 说明
"description": "央联收银台",
"author": "XueYou &&",
"license": "MIT",
// 入口文件
"main": "./main.js",
// 项目依赖
"dependencies": {
"axios": "^0.17.1",
"echarts": "^3.8.5",
"querystring": "^0.2.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
linux 打包失败
Need executable 'ar' to convert dir to deb
fpm 工具需要 ar 命令才能打包deb, 后来google后发现这个命令包含在binutils
sudo apt install binutils 解决依赖顺利打包
打包出来的deb安装时失败, 会报 libconf-2.so 找不到
suduo apt install -f 安装依赖后, 在安装deb包就行了
然后就能在运行了
以后我再研究怎么自动更新, 如果有疑问可以联系我
ubuntu 下的运行图
阅读(...) 评论()electron 完整项目构建过程
前段时间因为项目需要，简单了解了一下electron，加入了electron的开发群组，偶尔能在群里帮助小伙伴解决一些问题，觉得很开心。
但同时也发现小伙伴们的问题有几个比较常见，而官方文档又比较生涩且没有例子可参考，因此抽出时间整理了一篇文章，希望能够帮助入坑的小伙伴！
项目：官网electron-quick-start项目
项目使用环境：win7 64位
使用命令：npm
依赖：Node.js
特别鸣谢：本文中大量引用官网、程序如此灵动网站、CSDN博文、简书博文等，感谢这些文章的作者。在参考文档中给出了这些引用的原文链接。
1、构建electron项目
下载electron-quick-start(该博文全部使用npm,所以需要安装node,安装过程自行百度)
并执行该项目
# Clone the Quick Start repository
git clone https://github.com/atom/electron-quick-start
# Install the dependencies and run
npm install && npm start
命令执行结果如下：
1、除了使用上述命令下载electron-quick-start项目代码外，还可以直接到GitHub上下载该项目。
2、下载下来的electron-quick-start项目的package.json文件中的electron版本可能已经过时了，此时在执行npm install&&npm start时会报错。
错误类似如下：
Downloading electron-v0.34.3-win32-ia32.zip
Error: read ECONNRESET
这个错误说明两个问题：1）需要升级electron；2）网络连接问题
所以针对上述两个问题可以做如下处理：
1）先说网络问题
解决办法：更换源为淘宝
更换方法：执行如下两条命令（更多信息可查看参考文档《开发electron程序的npm准备工作》）
npm config set registry https://registry.npm.taobao.org/
npm config set electron_mirror http://npm.taobao.org/mirrors/electron/
2）升级electron，有两种方法：
一个是忽略，网络连接成功后，会在执行 npm install && npm start后会自动升级；
二是手动执行 npm install electron --save-dev
3、特别提示，这些命令都需要在文件当前路径下执行
至此，简单的demo就算运行出来了。
对electron项目打包方法有很多，常用的有两种：electron-packager和electron-builder
这些打包方法都需要根据项目中的package.json文件进行。字段全解可以参考。下面在具体介绍两种方法时也会有修改，请注意。
electron-packager
下面的仅仅是个范例，不能保证和你的实际情况相吻合。
electron-packager . --overwrite --platform=darwin --arch=x64 --out=out --icon=assets/app-icon/mac/app.icns --osx-sign.identity='Developer ID Application: GitHub' --extend-info=assets/mac/info.plist
electron-packager . --overwrite --platform=win32 --arch=ia32 --out=out --icon=assets/app-icon/win/app.ico
electron-packager . --overwrite --platform=linux --arch=x64 --out=out
electron-packager 的安装（electron-packager依赖Node.js，需要提前安装好）
# for use in npm scripts
npm install electron-packager --save-dev
# for use from cli
npm install electron-packager -g
注意：上面两部操作都是必须的。
使用方法参见上面范例中给出的三种方式。同时，可以将其放入package.json中，直接运行npm run package即可完成打包，如下
"scripts": {
"package": "electron-packager . --platform=win32 --arch=ia32 --electron-version=1.4.15 --overwrite --ignore=node_modules --ignore=.gitignore"
本例中，我的系统是win7,64位，该项目version是1.0.0，打包后项目名称为helloworld，放在项目当前路径下。所以修改之后的命令如下：
"scripts": {
"start": "electron .",
"package":"electron-packager . helloworld --platform=win32 --arch=x64 --electron-version=1.0.0 --overwrite --ignore=node_modules --ignore=.gitignore"
运行打包命令
npm run package
在当前项目下生成一个helloworld-win32-x64的文件夹，里面有一个名为helloworld.exe的可执行文件。
至此，使用electron-packager打包项目完成。想了解更多关于electron-packager，可以阅读、
如果想替换icon，只需要在命令后边加上–icon=your-icon-path/app.ico即可。
electron-builder
builder的参数一般写在package.json里面，下面的仅仅是个范例，不能保证和你的实际情况相吻合。更多可参见文档和
builder --mac
builder --win
builder --linux
安装electron-builder
# for use in npm scripts
npm install electron-builder --save-dev
修改package.json
将如下内容是放入package.json。对于build中每个属性的解读，请阅读。本例中，项目名称为electron-quick-start，appId使用productName
"build": {
"productName": "electron-quick-start",
"appId": "electron-quick-start",
"directories": {
"output": "build"
"files": [
"contents": [
"type": "link",
"path": "/Applications"
"type": "file"
"icon": "build/icons/icon.icns"
"icon": "assets/app-icon/win/app.ico"
"linux": {
"icon": "build/icons"
这里需要注意两点：
1、files属性里写的是指定被打包的文件，可以忽略不需要打包的文件。根据我的文件结构，我将其改成"./*"，意思是当前目录下的全部文件。
2、如果需要修改icon,将icon的路径指定到相应的目录即可。
运行打包命令
electron-builder --win
打包过程可能会因为缺少文件或下载文件失败而报错，参照进行处理。
没有更多推荐了，开发设计来赚钱
Electron在Windows下以管理员运行
为了实现在windows的UAC控制下以管理员方式运行，通常有两种方式：
注册表添加信息。这种方式通常是通过安装程序添加注册表信息。
exe文件中附加manifest文件。这种方式使得程序可以以免安装的方式运行。
由于electron通常开发的程序我们通常喜欢用免安装方式运行，下面就说说怎么修改electron中的manifest。
通过win sdk中的mt.exe工具可方便的对exe文件中附加的manifest进行导出和导入。由于electron中本身就已经附加了manifest文件，所以我们不能简单粗暴的创建一个manifest文件附加进去，需要先导出原来的manifest，修改后再导入。
导出manifest
mt.exe -inputresource:electron.#1 -out:manifest.xml
修改manifest
&?xml version="1.0" encoding="UTF-8" standalone="yes"?&
xmlns="urn:schemas-microsoft-com:asm.v1" manifestVersion="1.0"&
type="Win32" name="Microsoft.Windows.Common-Controls" version="6.0.0.0" processorArchitecture="*" publicKeyToken="ccf1df" language="*"&&
xmlns="urn:schemas-microsoft-com:asm.v3"&
level="requireAdministrator" uiAccess="false"/&
xmlns:asmv3="urn:schemas-microsoft-com:asm.v3"&
xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings"&
xmlns="http://schemas.microsoft.com/SMI/2011/WindowsSettings"&true&
xmlns:ms_compatibility="urn:schemas-microsoft-com:compatibility.v1" xmlns="urn:schemas-microsoft-com:compatibility.v1"&
xmlns:ms_compatibility="urn:schemas-microsoft-com:compatibility.v1"&
xmlns:ms_compatibility="urn:schemas-microsoft-com:compatibility.v1"
Id="{8e0f7a12-bfb3-4fe8-b9a5-48fd50a15a9a}"&&
xmlns:ms_compatibility="urn:schemas-microsoft-com:compatibility.v1"
Id="{1f676c76-80e1-4239-95bb-83d0f6d0da78}"&&
xmlns:ms_compatibility="urn:schemas-microsoft-com:compatibility.v1"
Id="{4a2f28e3-53b9-4441-ba9c-d69d4a4a6e38}"&&
xmlns:ms_compatibility="urn:schemas-microsoft-com:compatibility.v1"
Id="{d96-4fbd-8e2d-aa}"&&
xmlns:ms_compatibility="urn:schemas-microsoft-com:compatibility.v1"
Id="{e6-43c5-a5fe-008deee3d3f0}"&&
导入manifest
mt -manifest manifest.xml -outputresource:electron.1
Ok，搞定收工!
注: mt.exe通常在C:\Program Files (x86)\Windows Kits\8.1\bin\x64\目录下。
没有更多推荐了，1：首先安装nodejs
C:\Users\yan&node -v
v4.<span style="color: #.0
2：安装Electron&
C:\Users\yan&npm install --g electron-prebuilt
使用淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install electron-prebuilt -g
3：安装完成后运行 electron -v 检查是否安装成功&
C:\Users\yan&electron -v
阅读(...) 评论()在Electron上集成Flash播放器，无法加载问题
[问题点数：50分]
本版专家分：0
CSDN今日推荐
匿名用户不能发表回复！|
其他相关推荐}