# 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 端口服务即可
上次更新: 9/14/2020, 10:06:06 AM