详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决

2024-06-24 11:02:38阅读量:33 字体:

最近遇到一个问题,用 Vue 开发的项目在最近两年新出的安卓手机上没问题,在三四年前的旧手机上出现白屏问题。分析一下应该是安卓系统版本的原因,目前已知的是Android 6.0 以上都 OK,6.0 以下就不行了。

低版本安卓系统内置的 webview 不支持 ES6 语法等一些新特性,所以报错。但在手机上调试不方便,受一篇文章的启发, IE 浏览器也是同样的问题,所以可以在 IE 上调试,一个调好了两个就都好了。突然发现万恶的 IE 还是有点用的…

网上的文章大部分是 Vue-cli 2.x 版本的解决方案,但 Vue-cli 3 跟之前的版本还是有很大差异的,可能是我比较菜,看了 n 篇文章还是不知道怎么配置。经过努力,终于梳理出了基于 Vue-cli 3 的项目如何做兼容性配置的步骤:

1. 根目录下新建 .babelrc 文件

在项目根目录下新建 .babelrc 文件,跟 package.json 同级。 将以下代码复制到 .babelrc 文件中

详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决

2. 修改 babel.config.js

将以下代码复制到 babel.config.js 文件中,其中最上面四行是打包时删除 console 的配置,如不需要可以删除。

3. 修改 vue.config.js

用 vue-cli 3 新建项目时,默认是没有这个配置文件的,没有则在项目根目录下新建一个 vue.config.js ,也是跟 package.json 同级。

解决白屏问题需要添加的代码:

4. 修改 main.js 文件

找到 项目根目录/src/main.js ,添加以下代码

5. 安装依赖

在根目录下执行以下语句。如果在第二步不需要配置生产环境删除 console 可以不要最后一个 babel-plugin-transform-remove-console 。

以上五步配置完就可以解决 Vue 项目在低版本安卓系统和 IE 浏览器下显示空白的问题了。

附完整的 vue.config.js

这里引了几个依赖,如果运行报错则根据提示安装相应依赖即可。

以上就是本文的全部内容,希望对大家的学习有所帮助。


推荐阅读

  • 健康码换了手机号怎么办

    健康码换了手机号怎么办

    健康码换了手机号,可以进行修改,在微信中进行修改即可,也可以在支付宝中进行重新填写。具体操作方法如下: 健康码换了手机号怎么办 一、微信修改健康码手机号 1、打开手机微信app,点击我”,...

    阅读: 663

  • 美团怎么预约订餐到店吃

    美团怎么预约订餐到店吃

    美团预约订餐,然后到店吃,需要在美团进行抢购订餐,最后去店面出示订单凭证即可。具体操作方法如下: 美团怎么预约订餐到店吃 1、打开手机美团app,点击美食”。 2、选择需要订餐的店家,点...

    阅读: 792

  • 如何制作自己的卡通头像

    如何制作自己的卡通头像

    制作自己的卡通头像,可以通过美图秀秀进行,借助美图秀秀的动漫化身功能即可生成卡通形象。具体操作方法如下: 如何制作自己的卡通头像 一、使用美图秀秀 1、打开手机美图秀秀app,点击工具箱”...

    阅读: 704

  • 不小心退出微信账号怎么登录

    不小心退出微信账号怎么登录

    不小心退出微信账号的话,只要记得密码或者微信绑定手机号,就可以重新进行登录。具体的操作方式如下: 不小心退出微信账号怎么登录 1、打开微信app,进入登录”界面。 2、进入登陆&rdqu...

    阅读: 752

  • 抖音怎么看谁取消关注了我了

    抖音怎么看谁取消关注了我了

    抖音不能直接看谁取消关注你,但如果对方曾经与你是互相关注的话,就可以查看对方是否把你取关了。具体的操作方式如下: 抖音怎么看谁取消关注了我了 1、打开抖音,点击进入我”的界面。 2、进入...

    阅读: 1121

  • 苹果实况照片怎么弄到抖音上

    苹果实况照片怎么弄到抖音上

    实况照片是iPhone手机上的一种拍照模式,可以让拍的照片动起来。将苹果实况照片弄到抖音上的具体操作方式如下: 苹果实况照片怎么弄到抖音上 1、打开抖音,点击界面中间的+”号, 进入拍摄界...

    阅读: 805