这里只介绍我本次项目用到的文件：

• build 打包用到的资源和脚本
  • icons 后面打包成应用程序会用的图标
• data 内置数据库文件（没用到）
• electron 主进程服务
  • addon 插件目录
  • config 配置文件
    • bin.js 开发环境配置
    • config.default.js 默认配置
    • config.local.js dev环境加载
    • config.prod.js 生产环境加载
    • encrypt.js 加密配置文件
    • builder.json 打包配置
  • controller 控制器
  • service 业务层
  • preload 预加载
  • jobs 任务
  • index.js 主进程生命周期
• frontend 前端目录
• logs 日志
• out 打包可执行文件目录
• public 资源目录
  • dist 前端打包放在这
  • html 模版
  • electron js加密文件
  • images 一些图片
• main.js 入口文件

用npm run dev启动项目，
electron弹出，一直停在loading的界面。

官方整理的问题中也提到了这个问题，
页面一直loading或白屏，就说明没有请求到对应的前端资源，
官方提到可能是前端路由模式错误，不能是history，必须改成hash

解决方法1：检查端口号配置

确保下面两个端口位置一致：

• vite.config.js server.port

1
2
3
4

server:{
    port:8090, // 指定端口
    host:true
}

• electron/config/bin.js dev.frontend.port

1
2
3
4
5
6
7
8
9
10
11

dev: {
  frontend: {
    directory: './frontend',
    cmd: 'npm',
    args: ['run', 'dev'],
    protocol: 'http://',
    hostname: 'localhost',
    port: 8090, // 指定端口
    indexPath: 'index.html'
  },
},

并且确保此端口没有被其它服务占用

解决方法2：检查vite.config.js中的base路由设置

vite.config.js中，base基础路由必须是’./‘

1

base:'./'

electron/config/builder.json中能够配置exe打包图标的样式，
build/icons中存放着图标资源，
但是更换图标后依旧无效

因为windows缓存应用图标，
清理图标缓存的方法

cmd控制台输入：

1
2
3
4
5

taskkill /im explorer.exe /f
cd /d %userprofile%\appdata\local
del iconcache.mongodb /a
start explorer.exe
exit

图标缓存的位置在：C:\Users\Administrator\AppData\Local\Microsoft\Windows\Explorer
explorer.exe： 资源管理器
iconcache.db 图标缓存文件

因为上面提到的windows图标缓存的原因，
改了很多次icon都没用，
以为是icon的问题，于是试了很多生成icon的方法，
都很艰难

egg-electron官网也提供了2个图标生成工具，
其中有个叫做icon-gen的npm包，能用命令一键生成尺寸不同的icon（大喜），
而且作者甚至还贴心的把icon-gen的命令集成进去了（虽然我调用发现没用）

拉取icon-gen库：

icon-gen命令：

1
2

icon-gen -i sample.png -o ./dist --ico --ico-sizes 16 # 16x16
icon-gen -i sample.svg -o ./dist --ico  # 转ico

根据官方文档介绍，打包图标需要下面这些，而且名称不能修改：

一个蠢问题导致了另一个蠢问题……

用户屏幕分辨率是3840x2160的，开发用屏幕是1920x1080的，
因为正好是我的两倍，所以我就把浏览器的放大倍数缩小到50%，
然后把图切完了…… 这就等于没做屏幕适配，
在浏览器可以通过ctrl+滚轮放大缩小倍数，
但是桌面应用不行，但是在windowsOption中有个zoomFactor配置，
可以配置放大倍数，
我想让这个zoomFactor能够根据用户的屏幕进行适配，
但别说适配了，这个值生效都难，
就第一次配置生效了，之后接连修改好几次都没反应。
气麻了。

缓存，缓存，是因为有缓存！（麻了）
Previous zoomFactor is getting cached, unless you manually reset browserWindow’s zoom
缓存地址：C:\Users\Administrator\AppData\Roaming
删掉就行了。

至于根据屏幕分辨率设置zoomFactor这事，
我一手准备好electron提供的screen.getPrimaryDisplay().size，
获取主屏幕尺寸，
一手准备好win.setZoomFactor设置缩放率。
组合在一起，无事发生。

至于为什么没有实现我想要的效果，到现在我都没弄明白。

所以最后我还是乖乖的把px全都转换成了rem做页面适配……

1

npm install electron -g

报错：

1

RequestError: unable to verify the first certificate

参考博客

cnpm安装：

1
2

npm install cnpm -g
cnpm install electron -g

使用electron-egg提供的win打包命令（首次），
一直卡在包的下载上：

1

downloading url=https://github.com/electron/electron/releases/download/v11.2.1/electron-v11.2.1-win32-ia32.zip size=74 MB parts=8

还不只卡在这个包上，后面还有好几个包。

• 参考博客
• 镜像资源

直接网上手动下载卡住的包，放在C:\Users\Administrator\AppData\Local\electron\Cache目录下

打开electron项目，发现像background-clip、text-wrap等css样式失效，
大概和electron对应的chrome版本较低有关。

根绝electorn-egg提供的这份版本对应表进行更新：

版本关系

electron应用无法访问不安全地址

在index.js中的ready回调函数中忽略证书验证：

1
2
3
4

async ready () {
//  ssl证书错误
app.commandLine.appendSwitch('ignore-certificate-errors')
}

打开election打包成的exe程序，
发现网络请求路径全都变成了file://开头的请求

• 1、将axios发送请求时替换成全路径
  • 打包后算桌面程序，没有http服务器支持，加载的是静态页面
• 2、 electron开启允许跨域模式 webSecurity:false
  • 全路径请求会出现跨域问题，因此要设置忽略安全策略

参考博客

1
2
3
4
5
6

const getData = params => axios({
  method:'get',
  // 全路径
  url:'https:192.168.0.1:8090/123/abc',
  params
})

1
2
3

webPreferences: {
  webSecurity: false // 禁用同源策略
}

暂且还不知道这个如何解决，
但包壳前比包壳后多了250MB左右，
其中还包含Chromium内核。