解决vue在ios低系统白屏

环境:vue2,vue-cli3,ios 10.2系统
用到的插件:@babel/cli,@babel/core,@babel/preset-env,@babel/runtime ,@babel/plugin-transform-runtime,@babel/polyfill,es6-promise

安装:

// npm一次性安装多个包,包名之间用空格隔开
npm install --save @babel/runtime
npm install --save-dev @babel/cli @babel/core @babel/preset-env @babel/plugin-transform-runtime
npm install --save @babel/polyfill
npm install --save es6-promise

配置文件:
Babel的配置文件是Babel执行时默认会在当前目录寻找的文件,主要有.babelrc,.babelrc.js,babel.config.js和package.json。它们的配置项都是相同,作用也是一样的,只需要选择其中一种。这里我们选择新建一个babel.config.js文件,位置是与package.json同级。

// babel.config.js
module.exports = {
  plugins:[
    '@babel/plugin-transform-runtime',
  ],
  presets: [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
      }
    ],
    '@vue/app'
  ]
  
}

main.js文件里的设置,加文件开头如下代码,import "babel-polyfill"必须在第一行,确保下面的所有引入都能被polyfill发现

import "babel-polyfill"
import Es6Promise from 'es6-promise';
Es6Promise.polyfill();

vue.config.js文件中module.exports内添加如下代码

  chainWebpack(config) {
        // 在chainWebpack中添加下面的代码
        config.entry('main').add('babel-polyfill') // main是入口js文件
        config.entry.app = ['babel-polyfill', './src/main.js']
    },

完成以上就可以解决白屏问题,问题的根源是低版本系统对js新语法不识别。

备注:
参考:https://zhuanlan.zhihu.com/p/393122285
依赖包简介
@babel/cli,@babel/core是转码工具,@babel/preset-env这个npm包提供了ES6转换ES5的语法转换规则。
@babel/runtime ,@babel/plugin-transform-runtime 转换代码时候,注入函数声明,以便语法转换后使用。
@babel/polyfill 垫片,polyfill广义上讲是为环境提供不支持的特性的一类文件或库,既有Babel官方的库,也
有第三方的。babel-polyfill指的是Babel官方的polyfil。
es6-promise 浏览器兼容补丁

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前端工程化之前 前端工程化之前,我们编写代码 html js css . 因为浏览器只能读懂这几个代码因为单独的h...
    川九阅读 3,602评论 0 0
  • 最近在用vue做项目,项目在安卓4,5,ios9页面显示空白,问题解决跟大家分享一下 最近在用vue做项目,项目在...
    hibigger阅读 4,874评论 0 0
  • 原文: https://www.jianshu.com/p/cbd48919a0cc babel 7 的使用的个人...
    PixelEyes阅读 4,322评论 0 1
  • babel 7 的使用的个人理解 最近看了很多关于babel的使用方法,大部分在一些点上都没有说明白,同时给出的代...
    zshawk1982阅读 21,110评论 14 43
  • 1.模块化的相关规范 1.能够了解2.了解webpack3.了解使用Vue单文件组件4.能够搭建Vue脚手架5.掌...
    Scincyc阅读 3,841评论 0 0