electron内嵌antd-design-pro的开发关于打包的一些问题和别的

 起因:由于公司产品是一个工具类的 可能为了体现一种稳定 安全性,前端技术栈决定使用elelctron来开发一个桌面端应用 用到的前端框架是react UI框架是antd-design-pro

  正常来说 可以使用electron-quick-start来搭建框架 这样会轻松许多 但是因为一些原因 接手的项目没有用 所以只能靠自己去写了。

    本人 对electron也没有很深入的了解 在这里 只是就对一些开发过程中遇到的问题做些记录 但是由于 是项目差不多结束才做的 所以很多问题代码无法回退 只能大概描述了

  1 elelctron内运行antd 请求接口找不到问题(很早之前的问题了 就没有图片了)

    因为使用antd-design-pro调接口是用的代理, 类似 /api 这样的, 是相对路径 而electron 是打包所有在本地资源的 所以会导致这个问题

     解决方案:请求接口用全路径代替 同时禁用electron内部的安全策略。

       

 

 

 

 

  2 electron 打包问题 (在electron-builder 和 electron-package 中 我选择了前者(原因是网上都说前者打包出来的会小很多))

    一、 signature 问题  window 相对来说 没有证书也行 并不影响应用后续的打包 和 热更新 但是 mac还是需要的 没有证书(开发者账号) 打包出来的应用都无法使用(后来发现如果没有证书 你可以打包的时候设置CSC_IDENTITY_AUTO_DISCOVERY=false 这样也是可以打包出来 只是不被信任)

       注意 开发者账号  这样格式 是交了钱的。        

    二、 热更新 是一个桌面端的灵魂 (网上有很多文章 是关于热更新的 就不细些代码了 先后顺序按照我记起的来  )

       Q1、因为热更新主要代码是在主进程里面的 main.js 如果在里面的出错 在打包出来的应用你很难看到问题 所以开始之前 可以使用electron-log 在一些关键点打印出日志

         查看日志 在mac上 你可以进 查看日志

 

      Q2、我只是一个小前端 在一开始开发的时候 需要一服务器地址存放最新yml文件和打出来的包 为了简单 我本地启了nginx服务 将资源放入本地 这样 就可以自己测试热更了

        部分 nginx配置     如果 还没安装nginx 可以去看我之前写的nginx 部署vue 里面有一些简单的部署。

 

 

        桌面文件  里面就可以放入那些打包出来的yml dmg exe 之类的文件

        代码写入热更新地址 

       Q3、假设你已经跑起来热更新了 你或许会遇到 总是秒下  完全看不到过程

        原因是可能再你多次的测试中 其实资源早就已经下下来了 所以这个时候你需要去对应缓冲清除对应的资源 然后再继续测试

        资源地址  里面有一个pending 删除就可以了

       Q4、好不容易跑起来了 发现在日志里面 明明已经下完了 很正常 但是在前端显示 却会发现下载进度 一直开着 

        原因: 我也不太懂 我猜是和node有关里面的通信有关 表面上 你看到日志里面可能只是打印了10多次下载就到100% 但是实际上 主进程和渲染程会有上万次的通信

           所以在前端 可能得执行完才能结束 

        解决方案:      这样我是解决                             那个问题了。如果哪位哥哥知道具体原因 可以留言告诉我 让我学习学习。。。QAQ

        Q5、终于在mac上 热更新成功了 结果在window上测试时报错了 打开日志 发现  报错信息:无法建立到信任根办法机构的证书链 

           脑子里有大大的问号 吓的我以为热更新一定要证书 但是其实并不是这样

          原因:这个也怪自己 因为是mac上开发的 导入了p12证书 再打包window的时候 也签名用了p12 如果不热更新的话 正常 一点问题没有 但是热更新的话 就会去检测签名 这个时候会发现证书签名不对 所以就报错了

          解决方法:打包window的时候可以将CSC_LINK环境变量注释了

        Q5、 网上打包出来都是很小 我打包出来 好家伙 180多M  

          mac下进入app显示包内容查看具体哪些大 我这的原因是我打包的时候 把所有的node_modules都打包进去了 (当时项目 我是整个只有一个package.json文件)

         官方文档 https://www.electron.build/configuration/contents.html

        1、这些可以在builder里面的files自己写需要忽略的文件  !**/node_modules/**/*  可以忽略所有的的node_modules 但是 这样你就无法去载入你需要的一些dependencies依赖了

        2、再建一个文件夹 里面专门放electron相关的代码 和配置 这样就可以自定义 需要的依赖了

             package.json 里面就可以写一些builder 配置 以及一些electron-updater electron-log 之类和electron相关的东西

 

 

 

 

 

          

 

  暂时遇到的问题就是这些 后续有的话 会继续补充...........

 

 

 

 

 

        

        

 

 

 

 

 

 

      

posted on 2020-09-23 18:36  尚夏  阅读(1404)  评论(0编辑  收藏  举报

导航