vue中全屏screenfull使用过程中报错总结

vue中全屏目前实现大体有两种：一种时浏览器自带的document.documentElement.webkitRequestFullScreen()；两外一种使用screenfull插件

报错一，页面使用了iframe， 此时报错Uncaught (in promise) TypeError: Disallowed by permissions policy
    at VueComponent.fullscreen 

浏览器中自带全屏功能document.documentElement.webkitRequestFullScreen()，不过有兼容性问题

        let ope = document.fullscreenElement
        if(!ope){
          document.documentElement.requestFullscreen();
        }else {
          document.exitFullscreen();
        }

在iframe中添加属性allowfullscreen="true"解决问题

报错二：使用screenfull 启动项目报错You may need an appropriate loader to handle this file type.

采取两种解决方法：

（1）vue.config.js文件中配置属性

module.exports = {
   // 处理screenfull的webpack问题
  transpileDependencies:['screenfull'],
}

（2）卸载，screenfull,重新安装@5版本的，尝试了解决方法（1）未解决问题后，

经过一番搜索各种解决办法，有人说时因为最新版本的screenfull不稳定，换一个5版本的就可以了，抱着试一试的想法，就卸载重新安装了@5，好用了
卸载 ：npm uninstall screenfull

重新下载  npm i screenfull@5

报错三: 在使用全屏插件screenfull的时候，有时候会遇到类似下面的报错：

解决方式：
在iframe中添加属性allowfullscreen="true"解决问题

allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" oallowfullscreen="true" msallowfullscreen="true"