vue2的应用无法再UC浏览器打开，只显示白屏，请问怎么回事？其他正常

Question

vue2的应用无法再UC浏览器打开，只显示白屏，请问怎么回事？其他正常

Answer 1

引入babel-polyfill试下，之前我也在安卓的某些浏览器遇见了这个问题。

<script src="https://cdn.staticfile.org/babel-polyfill/6.16.0/polyfill.min.js"></script>

Answer 2

是用webpack打包后还是引js

Answer 3

是否是你没有用npm run build打包后再用uc，
某些浏览器不支持es6语法

Answer 4

@thedb2333 我用npm run build 打包了，在真机上白屏， 微信里正常，电脑浏览器上也正常

Answer 5

我也遇到过同样的问题，说一下我遇到的问题以及问题的原因吧，提供一份思路，就是在我的入口文件中，

引入了被注释掉的fetch，后面我把fetch注释掉，就OK了，导致无法显示，但是在QQ浏览器能显示，估计是UC和QQ对于问题的限制要求不同吧，本来打算使用UC开发版调试的，也无果。

Answer 6

这个问题我经常遇到，一般情况下是微信和qq浏览器没问题，但是手机自带的浏览器和uc浏览器空白，打印会发现一句代码都没有执行。这种情况应该是下面这几种情况引起的。
第一种就是因为用了es6的语法没有转es5，不过现在基本都用babel转义，所以应该很少是这种问题。
第二种就是用了新的api，而这些api，babel是不会进行转义的，例如我上次出现这种情况，就是用了Object.freeze()去冻结变量，但是uc不支持这个api，babel也不对他进行转义，所以出现白屏。
然后可能也有其他方面的原因，目前还不太清楚。
如果不知道具体是哪一块出现问题，那就只能用二分法慢慢去排除了，注释掉入口，检查打印调试信息。

Answer 7

你好，我用vue2做了个spa，也碰到了这个问题，
我发现白屏的页面，大都是如下这种布局(绝对定位，宽高100%，内部滚动)：

html:

<div id="app">
    <div class="page-wrap">
        <div>
            <!--具体页面wrapper-->
            <div class="xxxx-wrapper"></div>
        </div>
    </div>
</div>

portcss:

.page-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: #f5f5f5;
    color: #333;
    font-size: 0.32rem;
    overflow: hidden;
}
.xxxx-wrapper{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;    
}

我尝试给每个白屏页面的wrapper样式，加上 transform: translateZ(0);

.xxxx-wrapper{
    /*其他不变*/
    transform: translateZ(0);
}

结果在uc中，就可以看到了，页面不会白屏了。测试机：坚果pro2(Android7.1.1)

但是我不知道，为什么加上这个就不会白屏了。
我只知道设置translateZ会触发gpu渲染，提升渲染性能。
如果有道友知道原因，请告诉我。谢谢。

Answer 8

放弃UC这烂鬼浏览器吧，这是移动端的IE6

Answer 9

解决了么？@海兰云天