electron学习笔记electron之打包程序file路径的刷新页面处理

Posted 2022-06-09 博读代码

问题从何而来

在做解除摄像头设备占用时，遇到了一个棘手的问题，就是视频窗口页面有太多的 video 标签交错使用。

利用 stream.disposeMediaStream() 这种方法已经无法有效关闭占用摄像头的权限，于是想到通过 “退出视频窗口进行刷新” 的方式来解决摄像头设备被占用的问题。

刷新的几种方法

1.this.$router.go(0)

go 函数的用法需要带参数，例如 go(-1) 表示返回上一页，go(0) 跟第2种方法差不多。

2.location.reload()

重新加载页面。

3.provide/inject

在 App.vue，声明 reload 方法，控制 router-view 的显示或隐藏，从而控制页面的再次加载。

使用 file 模式的访问方式

以上几种方法在 dev 开发环境下，利用 http 路径访问是没有问题的。

但经过打包处理后，访问的路径改为 file 模式，那以上的刷新就会直接再次去访问 index.html 文件，等于回到了首页，并没有停留在之前的页面，所以需要做一些处理来解决这个问题。

1、利用 electron-store 插件来缓存登录数据

将登录状态记录下来，如下：

2、返回页面，进行刷新释放摄像头设备

3、进入到登录页，脚本自动登录

小结

使用 getUserMedia 调用过的摄像头设备，若出现无法释放的情况，大家可以尝试这种方法。以上就是本期刷新 electron 页面的分享，希望能给大家带来帮助。

下期给大家分享更多实战中的点滴，如果大家对此感兴趣，欢迎各位关注、留言，大家的支持就是我的动力！