electron

git安装包下载链接

https://npm.taobao.org/mirrors/git-for-windows/

yarn使用文档

https://www.cnblogs.com/sunqq/p/10785445.html

解决安装Electron缓慢问题
Electron入门应用打包exe(windows)

npm install electron-packager -g
基本打包命令:electron-packager . HelloWorld --platform=win32 --arch=x64 --icon=favicon.ico --out=./out --asar --app-version=0.0.1 --overwrite --ignore=node_modules


electron-packager <sourcedir> <appname> <platform> <architecture> <electron version> <optional options>

参数说明:
  • sourcedir:项目所在路径
  • appname:应用名称
  • platform:确定了你要构建哪个平台的应用(Windows、Mac 还是 Linux)
  • architecture:决定了使用 x86 还是 x64 还是两个架构都用
  • electron version:electron 的版本
  • optional options:可选选项
第二种方法:

1 .安装依赖
npm install electron-builder --save-dev
npm安装可能会很慢
yarn add electron-builder
2 .配置打包命令
在 package.json 的 scripts 中添加两条新命令 pack 和 dist:

"scripts": {
    "start": "electron .",
    "pack":"electron-builder --dir",
    "dist":"electron-builder"
}
  • pack命令不会打包,只会生成一个包文件夹压缩包,用于测试流程。
  • dist会先生成打包后的文件夹(xxx-unpacked),再将其打包成一个 Setup 安装包。
    3 .配置 build 参数
    build 参数由 electron-builder 使用,我们的打包参数可以在此配置。
    详细参数及适用平台参考:https://www.electron.build/configuration/configuration
//package.json
"build":{
    "appId":"com.azimiao.test",
    "asar":true,
    "afterPack":"./build/afterPack.js",
    "directories":{
        "buildResources":"build",
        "output":"dist"
    },
    "win":{
        "target": [{
            "target":"nsis"
        }],
        "icon":"build/favicon.ico",
        "asarUnpack":[
            "src/**",
            "README.md"
        ]
    },
    "nsis":{
        "oneClick":false,
        "allowElevation":true,
        "allowToChangeInstallationDirectory":true,
        "installerIcon":"build/install_favicon.ico",
        "uninstallerIcon":"build/uninstall_favicon.ico",
        "createDesktopShortcut": true,
        "createStartMenuShortcut": true
    }
}

简单介绍下打包参数内的重要配置项:
directories.buildResources:默认值为 build,是打包时的资源文件夹,该文件夹不会被打包至程序内,可以放置一些打包需要用的图标、资源等。
directories.output:默认值 dist,打包输出文件夹。
afterPack:生成 Unpack 文件夹后要执行的脚本,运行的时机在打包之后,在生成安装包之前。我用它来删除 README.md 等不需要放入安装包的文件。
win.target:默认值 nsis,指定 win 平台的打包类型,例如appx、msi、zip等。
win.asarUnpack:不会压缩进 app.asar 的资源。
nsis.allowToChangeInstallationDirectory:生成的安装包是否允许改变安装位置。

afterPack.js
const fs = require("fs");
const path = require("path");
async function afterPack(context){
    // 删除 README 文件,使其不加入 Setup 包中。
    let readmePath = path.join(context.appOutDir,"resources/app.asar.unpacked/README.md");
    if(fs.existsSync(readmePath)){
        fs.unlinkSync(readmePath);
    }
}
module.exports = afterPack;

参数说明:

ico在线制作

https://tool.520101.com/diannao/ico/ 或 https://www.qvdv.com/tools/qvdv-ico.html
在线制作的图标有问题,这里推荐一款制作软件IconWorkshop
尺寸42*42

electron-builder打包时下载electron失败解决方案

electron-builder 在打包时会检测cache中是否有electron 包,如果没有的话会从github上拉去,在国内网络环境中拉取的过程大概率会失败,所以你可以自己去下载一个包放到cache目录里
https://github.com/electron/electron/releases/download/v8.0.0/electron-v8.0.0-darwin-x64.zip
放一个下载地址,国内github下载也不一定能下下来
路径:C:\Users\用户名\AppData\Local\electron\Cache
压缩包放进去之后解压即可,打包过程中可能会需要下载别的包,还是会卡住,一样的解决方法。

打包

electron-builder
installerIcon 安装程序图标需要256*256
最好用yarn来运行命令,用npm的话会有打包失败的情况,或者卡顿。

打包运行生成的exe左上角图标不显示问题(在线制作的ico)

favicon.ico文件太大,控制在20~50kb

electron-vue vue-cli4 初始化项目失败

electron-vue文档
npm install -g @vue/cli-init安装依赖用npm i(运行打包yarn会卡在那里,自己尝试换着用就好。)

参考链接

electronzip包下载到本地npm源
直接浏览器打开淘宝那个镜像源:npm.taobao.org/mirrors/ele…,把你要安装的electron对应的版本zip包下载到本地,放在用户目录下的一个名为.electron的隐藏文件夹中
打包的时候可能还是要下载github的包:https://github.com/electron/electron/releases/tag/版本号
https://github.com/electron/electron/releases/tag/v2.0.18

Vue+Electron下Vuex的Dispatch没有效果的解决方案

mapActionsnamespaced引入,无报错也不执行,查了半天vuex文档,结果是electron的问题

方法一:
store/index.js 里面,去掉 createSharedMutations 插件。
方法二:
https://github.com/vue-electron/vuex-electron#installation
看第 3 条
意思就是:
/src/main/index.js加上一行代码import '../renderer/store'(默认路径一般都是这个)

import { app, BrowserWindow, Menu, ipcMain } from 'electron'

import '../renderer/store'//vuex action不执行
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容