vue-cli创建的项目打包后在安卓手机qq浏览器和uc浏览器页面空白

[caosenvip]

Version

2.5.10

Reproduction link

http://web-appfiles.tinydonuts.cn/ugc/index.html?detailInfoId=21061&detailInfoTypeCode=1

Steps to reproduce

你好，我是vue的使用者，发现最近升级后的vue-cli创建的项目打包后在安卓手机qq浏览器和uc浏览器页面空白，其他浏览器均正常，静态资源请求到了，未解析执行，测试半年前创建的项目各个浏览器均可正常访问，请问有解决办法吗？

What is expected?

正常访问

What is actually happening?

页面空白，静态资源请求到了，未做解析及接口请求

[yyx990803]

至少先自己排查下报错信息吧？比较大的可能是 babel-preset-env 的 targets 范围不包含这些浏览器了，自己调整一下。https://github.com/babel/babel/tree/master/packages/babel-preset-env#babelpreset-env----

[luo772435545]

我也是遇到这个问题了。vue版本是2.5.2。之前有遇到过空白页的问题，后来加入了bable-polyfill。空白页的问题解决了，但是这次，排查了很多问题都不行。
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
"mint-ui": "^2.2.11",
"axios": "^0.17.1",
尝试把vuex和vue-router版本都降为2.5左右也是不行。

安卓uc浏览器和qq浏览器空白页

[fengjiel]

请问你们遇到的问题解决了吗？我也碰到了同样的问题排查了好久没有解决 @luo772435545 @caosenvip

[luo772435545]

没呢。.babelrc什么都搞了一遍，还没找出问题。
现在直接下载最新的vue也是无法在uc上正常打开的。
我把已知的依赖全部降为之前可正常打开的依赖，在uc上还是显示空白，可能和下面的依赖有关系
"babel-helper-vue-jsx-merge-props": "^2.0.3",多了
"babel-plugin-syntax-jsx": "^6.18.0",//多了
"babel-plugin-transform-vue-jsx": "^3.5.0",多了
"connect-history-api-fallback": "^1.3.0",少了
"eventsource-polyfill": "^0.9.6", 少了
"function-bind": "^1.1.0", 少了
"node-notifier": "^5.1.2", //多了
"portfinder": "^1.0.13", 多了
"postcss-import": "^11.0.0", 多了
"postcss-loader": "^2.0.8", 多了
"shelljs": "^0.7.6", 多了
"uglifyjs-webpack-plugin": "^1.1.1", 多了
"webpack-dev-server": "^2.9.1",多了
"webpack-dev-middleware": "^1.10.0",少了
"webpack-hot-middleware": "^2.16.1",少了

[luo772435545]

现在可以确定是自己的问题 哈哈，项目中用了蛮多新语法。具体是因为什么还要再排查

[luo772435545]

问题找到了，在 checkbox里面 同时使用了v-model :checked 会导致白屏没有报错。

[caosenvip]

@luo772435545 我没有用到checkbox，所以白屏不止这一个原因引起的

[fengjiel]

需要修改.babelrc 内的配置么？ 我也没有用到checkbox，也没有报错 这才很尴尬。。。

[caosenvip]

@fengjiel 我测试发现较早版本的vue项目可以正常在安卓的qq和uc浏览器运行，直接把出现空白页的项目修改到老项目里进行build就可以了

[fengjiel]

嗯 我们之前也是想的实在不行就移过去。。。这是没有办法的办法了。。。。[捂脸]

[caosenvip]

你如果项目不急可以再查查原因，查到希望能告诉我一声，项目如果很急，所以能解决空白最重要

[yyx990803]

测试了一下，生产环境构建后是可以正常访问的，所以不是 Vue 本身的问题，应该是 webpack-dev-server 的问题。到那边去问问吧。

[yyx990803]

webpack/webpack-dev-server#1241

merge 之前可以手动拉我的分支里的改动...

[mehwww]

我这边也出现相似的情况，目测是 webpack 3 Scope Hoisting 特性造成的，禁用掉 webpack.optimize.ModuleConcatenationPlugin plugin 后恢复正常

[jianxiaoBai]

我也遇到了同样的问题,
不过现在已经解决了,
主要原因是 static 静态文件中有 es6 的语法,
而 babel 编译时不会 编译 static 中的文件
解决方式:
第一种=> 把 static 文件放到 src 中
第二种=> 手动把 static 文件中的改成 es5
需要执行 npm run build 之后再看
npm run dev 的时候暂时我这还不行, 可能是 dev 的时候不会执行 babel 进行编译,
但是 build 之后的文件是可以在 钉钉或者不支持 es6的浏览器上看了

[wmui]

我这边把webpack-dev-server锁定到2.7.1版本就可以用了，你们可以试下

[benqy]

@wmui 解决了我的困扰

[Qiuziscorpio]

我目前重新新建vue-cli脚手架都不行。安卓微信浏览器打开是白屏的 其他设备都可以。
webpack-dev-server 已经是2.7.1的版本了 还是不行

[Drowned-fish]

请问这个问题解决了吗？一直用的谷歌，今天试试360才发现body除了script之外什么都没有