乐趣区

关于electron:Electron-踩坑记录一

场景形容

构建 pc 客户端,采纳 electron-vue 脚手架进行疾速搭建环境。
性能点在 web 端全副失常,移植代码到 electron 时呈现问题的性能点有:

1. rtmp 流媒体的播放  
2. ant-design-vue UI 框架局部组件生效 

???? 播放器应用的是 vue-video-player,播放 rtmp 流须要应用 flash 技术。

electron 援用 flash 插件打包示例

问题解决

简略记录问题要害

 问题:pc 客户端 ant-design-vue 局部组件不能失常工作 
起因:electron-vue 将它视为 webpack 的 externals 了,其中 UI 组件含有的 vue 文件没有被 vue-loader 失常编译,才导致性能生效
解决:找到 .electron-vue/webpack.renderer.config.js 将 ant-design-vue 退出到白名单 whiteListedModules

???? electron 白名单配置

 问题:pc 客户端引入 flash 之后还是不能失常播放 rtmp 流
起因:electron 无奈读取 vue-video-player 依赖装置的 videojs-flash 插件
解决:独自装置 videojs-flash 插件为我的项目的依赖 npm i videojs-flash -S
 问题:编译成 pc 客户端后呈现 vue-video-player 在行将 ready 这一步卡住
起因:Chromium 环境下 flash 加载的平安问题,不容许在 "file://" 协定下加载,而打包后的文件默认以 "file://" 协定加载
解决:在主线程里起一个 express 服务,使得打包后页面文件运行在本地的 http 端口服务即可 
退出移动版