quasar使用electron打包

 从构建好的项目中,我们不难发现,electron打包有两种方式:

electron-packager打包

 这篇博客是通过我尝试了很多种方法之后,最先开始,我使用的是electron-packager,所用的electron和electron-packager版本分别是:

"electron": "^18.0.2",

"electron-packager": "^15.4.0",

它打包时需要下载的包是:electron-v18.3.2-win32-x64.zip

尝试了很久,最后还是没搞明白怎么使用本地缓存来实现打包,

在这个文件夹下:C:\Users\xyongz\AppData\Local\electron\Cache

但是只要有这么一个文件:



文件内有如下两个文件:



我改了名字后,打包就不会成功了,只要修改了上面文件中的任意一个字母,就会报下面的错误

报错如下



不改文件名称就能正常打包,但怎么生成的这个文件,目前还没搞明白,如果有某位大佬知道,还请一定要在评论区多多交流~

使用electron-builder打包

我使用的是:"electron": "^19.0.2",

 首先我们需要修改我们的quasar.config.js文件:

官网位置:Publishing (electron-builder only)

// quasar.config.js

electron: {
bundler: 'builder', // set here instead of using command line flag --bundler
builder: {
appId: 'com.electron.myelectronapp',
win: {
target: 'nsis'
},
publish: {
'provider': 's3',
'bucket': 'myS3bucket'
}
}

运行quasar build -m electron命令后package.json文件中会自动添加"electron-builder": "^22.4.0",

此时程序继续运行,运行后报如下错误:



从报错中,我们可以看到,需要下载electron-v19.0.3-win32-x64.zip,此时,我们可以去淘宝镜像网站下载electron



把我们自己下号的zip放到:C:\User\xyongz\AppData\Local\electron\Cache



然后继续运行,发现还需要下载:winCodeSign-2.6.0.7z ,[点击下载](https://registry.npmmirror.com/binary.html?path=electron-builder-binaries/)



(下载好之后,可能还要下载一两个压缩包,但是,他们比较小,一般应该能下好)

下载好之后放C:\Users\xyongz\AppData\Local\electron-builder\Cache

需要新建文件夹,名字就是:winCodeSign,将下载好的压缩包解压到winCodeSign文件夹中,如图所示:



然后继续运行,接下来就可能出现如下错误:



没错,就是中文乱码,解决它,有一个简单的方法,就是把路径中涉及到的中文全改成英文,

如果不想这么做,那么我们就执行第二个方法:

找到 node_module/app-builder-lib/out/targets/nsis/NsisTarget.js中的executeMakensis() 方法,在这里面添加一句代码,支持中文

args.push("-INPUTCHARSET","UTF8");

如图所示:



运行结果图:



最后,

electron-packager和electron-builder打包的区别是:

electron-packager打包之后生成的目录如下:

electron-builder打包之后生成的目录如下:

从这两张图可以看出,用builder打包的方式,多了一个安装文件,如果想直接发送安装文件给朋友玩的话,就建议直接用builder打包,不需要安装程序就用packager打包就行了!

这两种打包方式,肯定还有一些别的区别,在这里就不写出来了, 小伙伴们自己研究吧~~

quasar使用electron打包的更多相关文章

  1. Electron 打包时下载 xxx-electron-v1.6.8--x64.zip 文件出错

    Electron 打包时下载 xxx-electron-v1.6.8--x64.zip 文件出错 今天在windows上打包其它平台的Electron应用的时候,由于是第一次,所以总是下载 xxx-e ...

  2. electron打包发布

    1.全局安装electron npm install electron -g 在cmd 直接输入 electron 直接启electron 2.编写第一个Electron应用 在任何地方,建立一个ap ...

  3. 记一次使用Node.js electron打包网站的记录

    具体步骤请参考:http://blog.csdn.net/a727911438/article/details/70834467 打包时出现了不少问题,逐一记录下来以供其他人参考. package.j ...

  4. Electron 打包Mac安装包代码签名问题解决方案Could not get code signature for running application

    最近一直在做electron应用的打包,集成mac版本的自动更新时出现了问题. Error: Could not get code signature for running application ...

  5. electron打包vue项目

    electron是什么 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并 ...

  6. electron打包之真的恶心

    用electron-packager进行打包 这个模块的文档写的真的垃圾 1.先看看首页的参数介绍 就是说必选参数就是源码路径和app名字和--platform还有--arch咯,而且源码路径也没说是 ...

  7. electron打包成桌面应用程序的详细介绍

    1.前提条件 a. 安装了node b.安装了electron c.你知道自己写的东西(js,css,html等等)放在那个文件夹(假设这个文件夹命名为 app,下面会用到)中 2.安装electro ...

  8. electron打包整理

    最近在折腾把项目打包成桌面应用程序,发现一个工具electron,可以讲项目打包成一个跨平台的应用程序,很方便,来学习一下. 1.先安装electron.electron-packager,安装方法可 ...

  9. electron打包分发

    原始的方式打包 下载对应的版本号的Release Electron 然后把对应的项目方便整理成这样的目录结构(Windows下) node_modules重新安装,不然可能启动失败 把整文件夹给别人就 ...

  10. 将现有vue项目基于electron打包成桌面应用程序

    一.前言 项目本来打算采用B/S架构去做的,浏览器网址方式打开还是让用户不方便: 二.使用electron集成桌面应用 本身项目是使用vue-cli开发的,在使用electron之前,需要将本身的项目 ...

随机推荐

  1. A-深度学习面试题

    目录 目录 一,滤波器与卷积核 二,卷积层和池化输出大小计算 2.1,CNN 中术语解释 2.2,卷积输出大小计算(简化型) 2.3,理解边界效应与填充 padding 参考资料 三,深度学习框架的张 ...

  2. Iris_data_analysis

    SVM调用实例--鸢尾花 任务描述: 构建一个模型,根据鸢尾花的花萼和花瓣大小将其分为三种不同的品种. 数据集: 每一行数据由4个特征值及1个目标值组成,4个特征值分别为:萼片长度.萼片宽度.花瓣长度 ...

  3. 从一个 issue 出发,带你玩图数据库 NebulaGraph 内核开发

    如何 build NebulaGraph?如何为 NebulaGraph 内核做贡献?即便是新手也能快速上手,从本文作为切入点就够了. NebulaGraph 的架构简介 为了方便对 NebulaGr ...

  4. Gepetto:使用chatGPT来对函数功能进行分析并重命名变量的IDA插件

    最近OpenAI的chatGPT很火,chatGPT是一个大型的语言模型,能够生成人类语言的文本,主要用于对话式的问答和聊天,以及模拟人类的对话行为 有关chatGPT的介绍就不多赘述了,相关内容很多 ...

  5. .NET周报【12月第1期 2022-12-08】

    国内文章 CAP 7.0 版本发布通告 - 支持延迟消息,性能炸了? https://www.cnblogs.com/savorboard/p/cap-7-0.html) 今天,我们很高兴宣布 CAP ...

  6. 为什么 Random.Shared 是线程安全的

    在多线程环境中使用 Random 类来生成伪随机数时,很容易出现线程安全问题.例如,当多个线程同时调用 Next 方法时,可能会出现种子被意外修改的情况,导致生成的伪随机数不符合预期. 为了避免这种情 ...

  7. 使用IntelliJ IDEA打开一个项目步骤

    目录 1.普通java项目 步骤一.使用IDEA打开一个新的项目 步骤二.设置项目的SDK 步骤三.设置项目的src为Resources Root​ 2.Maven项目 前三步同普通java项目相同 ...

  8. 体验一个前端视图层的mvvm的框架Knockoutjs(双向绑定,模板..)..解放您的双手,不再处理那么多的dom操作..快速实现视图层数据与UI的交互处理

    笔者之前对于类似前端展示的,可能都是自己开发js对象,集合外加dom事件进行处理..  近期看到相关资料,了解了Knockoutjs这个框架,下面来段代码: <script type=" ...

  9. Java学习笔记 :2021年12月31日 上午

    Java学习笔记 :2021年12月31日 上午 目录 Java学习笔记 :2021年12月31日 上午 关于计算机语言 1.关于语言的分类 2.小结 关于Java语言的基础语法 1.主方法 2.其他 ...

  10. 个别编程语言在OJ平台上的输入输出方式

    OJ 平台输入输出 一. C/ C++ 输入 scanf() gets() getchar() 输出 printf() puts() putchar() C++ cin >> cout & ...