vue不兼容低版本安卓手机,白屏问题

2,787 阅读1分钟
首先我们从最基础开始排查
1.你的项目是否编译了es6语法:
  • 第一步:npm 安装
  • npm install babel-polyfill
  • npm install es6-promise
  • 然后
  • package.json中会出现下面这两行,注意查看下,根据不同时间版本号会不同的,重点是前面
  • "babel-polyfill": "^6.26.0",
  • "es6-promise": "^4.1.1",
  • 第二步:main.js引入
  • import 'babel-polyfill'
  • import Es6Promise from 'es6-promise'
  • require('es6-promise').polyfill()
  • Es6Promise.polyfill()
  • 第三步:更改 webpack.base.conf.js 文件中的入口
  • entry: {
  • app: ["babel-polyfill", "./src/main.js"]//改为最新的这行入口
  • // app: ‘./src/main.js’
  • },
  • 第四步:修改.babelrc文件
  • { "presets": ["es2015" , "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime"] }
  • 第五步:webpack.base.conf.js 中修改
  • {
  • test: /\.js$/,
  • loader: 'babel-loader',
  • query: {
  • presets: ['es2015']
  • },
  • include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]

如果还不行,请往下看

2.你可能报了Use of const in strict mode错误
怎么才能知道报的什么错呢?请点击
Console

那是因为webpack-dev-server在2.8.0版本开始就有es6语法的js了,低版本的浏览器或设备对es6的兼容还是比较差的,会出现白屏或打不开;
解决方案:↓
把webpack-dev-server降低,2.7.1版本刚刚好;
npm rm webpack-dev-server -D
npm i webpack-dev-server@2.7.1 -D

如果还没解决,在往下看

3.如果还没解决,那你可能用了iview框架,而且是按需引用 的组件,
解决方案:在你的webpack.base.conf.js里添加
{
test: /iview.src.*?js$/,
loader: 'babel-loader',
},
改成全局引用也可以,iview按需加在不会进行es6的编译,只有全局引用了才会被认为是你的代码编译成es5语法;

如有疑问或遗漏,请留言↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓