一、前言

本篇主要介绍electron应用的mac版本如何实现代码签名以及公证，因为没得代码签名，我们是没有办法进行更新的。

二、实现签名

前置条件，你需要有一个开发者账号。不然咱们就没办法往下进行了（默认你有哈）。咱继续往下说

1.制作CSR文件

什么是CSR文件呢？

CSR是英文Certificate Signing Request的缩写，即证书签名请求。是证书申请者在申请数字证书时由CSP(加密服务提供者)在生成私钥的同时也生成证书请求文件，证书申请者只要把CSR文件提交给证书颁发机构后，证书颁发机构使用其根证书私钥签名就生成了证书公钥文件，也就是颁发给用户的证书。

这里简单理解就是我们接下做签名证书的基础。

1.首先我们通过搜索找到并打开钥匙串访问应用

2.然后点击左上角菜单，钥匙串访问->证书助手->从证书颁发机构请求证书

3.之后就会出现如下弹窗，输入用户电子邮箱地址（自己的常用邮箱即可），选择存储到磁盘，然后点击继续

4.之后就会生成一个CSR的文件（全称CertificateSigningRequest.certSigningRequest），我们先将他放在桌面上，如图所示

2.生成Developer ID Application证书

这里要注意，我们的证书类型必须是Developer ID Application。

1.进入苹果开发者网站证书页面点击进入。
2.点击添加，进入到新建页面

3.选择Developer ID Application，这里再次强调Electron打包的桌面应用必须使用这个证书，然后点击继续

4.这里就需要上传咱们第一步生成的CSR文件了

5.上传成功之后你就可以看到自己生成证书的信息了，然后点击右上角下载

6.将下载好的证书，放到桌面上，之后双击证书，将会自动添加到钥匙串中

3.生成P12签名文件

1.我们在钥匙串访问中就找到我们的证书，如下图所示

2.选中、右键，选择导出证书

3.记好导出的位置，我们之后配置环境变量的时候要用到

4.导出后，生成文件如下

4.配置环境变量

让electron应用在打包时候，能找到签名文件。

打开终端

sudo vim ~/.bash_profile

开始配置变量

// 刚刚p12存放的文职
export CSC_LINK = /Users/jvtd/APPcertificate/certificate.p12
// 你创建p12文件的密码
export CSC_KEY_PASSWORD = *******

退出编辑

:qw

重载环境变量

source ~/.bash_profile

查看环境变量

env

这样就成功了。

5.打包electron应用

根据上面介绍设置好之后，我们再去打包，就会看到如下图所示

就代表我们签名成功了。

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取

【Electron】vue+electron代码签名（mac篇）相关推荐

Electron 打包Mac安装包代码签名问题解决方案
最近一直在做electron应用的打包,集成mac版本的自动更新时出现了问题. 具体打包流程请参考:Electron 桌面应用打包(npm run build)简述(windows + mac) El ...
Electron 打包Mac安装包代码签名问题解决方案Could not get code signature for running application
Electron 打包Mac安装包代码签名问题解决方案Could not get code signature for running application 参考文章: (1)Electron 打包 ...
手牵手系列之搭建Vue+Electron项目
https://blog.csdn.net/weixin_41549915/article/details/110931264 前言 electron:使用 JavaScript,HTML 和 CSS ...
editor修改样式 vue_手摸手Electron + Vue实战教程（三）
系列文章: 手摸手Electron + Vue实战教程(一) 手摸手Electron + Vue实战教程(二) ❝ 上一篇我们已经完成了左侧菜单栏的基本样式功能,这一篇我们就主要来开发右侧的Markd ...
android仿微信图片编辑器,electron/vue可编辑框contenteditable|仿微信截图
基于Electron+vue实现div可编辑contenteditable插入表情|electron-vue截图功能为了避免使用 vue 手动建立起 electron 应用程序.electron-v ...
成功启动electron-egg项目，electron+vue的傻瓜式搭建
文章目录零.总结半.本篇目的一.安装 VirtualBox 二.下载Windows11镜像二.下载Windows11镜像(替代步骤) 三.创建虚拟电脑其他.设置Win11系统(可选步骤) 四 ...
Electron vue使用详解
Electron vue使用详解 Electron是什么? Electron 是一个框架,可以让您使用 JavaScript, HTML 和 CSS 创建桌面应用程序. 然后这些应用程序可以打包在m ...
Electron + Vue开发一款音乐播放器
一.桌面版音乐播放器劳动节放假了,给大家分享一个轻松的开源项目,一个基于 Electron + Vue 开发的音乐软件.项目的一大特色就是多平台搜索歌曲,并支持下载功能(有些平台的vip歌曲也可以哦 ...
手把手教Electron+vue的使用
.现如今前端框架数不胜数,尤其是angular.vue吸引一大批前端开发者,在这个高新技术快速崛起的时代,自然少不了各种框架的结合使用.接下来是介绍electron+vue的结合使用. 2.Elect ...

【Electron】vue+electron代码签名（mac篇）