公司最近的vue项目运行在安卓5或者IE浏览器中会白屏,找到了一招方法立马解决该问题,亲测有效

出现问题的原因:浏览器兼容性问题,不支持ES6新特性,所以思路是加一些ES6转ES5的垫片,具体步骤如下:

本方法适用于Vue CLI 4.x的vue2项目
1、第一步在main.js中引入:

import 'core-js/stable'
import 'regenerator-runtime/runtime'

2、第二步在babel.config.js中添加 useBuiltIns: ‘entry’:

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'entry'
      }
    ]
  ],
  ...
 }

3、最后(如果安装了用ES6写的插件的话)需要在vue.config.js中添加 transpileDependencies:

module.exports = {
  transpileDependencies: [
    'vant', // 一些插件名A
    'js-base64', // 一些插件名B
    'vconsole'
  ],
  ....
}

好啦,你编译的时候会自动帮你安装好 Polyfill 的所有插件。是不是很好用?

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐