脚手架创建vue2项目解决低版本手机浏览器白屏

最新推荐文章于 2023-08-09 09:48:30 发布

weixin_43885974

最新推荐文章于 2023-08-09 09:48:30 发布

阅读量608

点赞数 1

分类专栏： vue 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_43885974/article/details/129302266

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前提

环境：（vue 2.6.14 ; @vue/cli 4.5.17）
混合式app开发，将vue项目打包到原生webview下；安卓及ios低版本手机不兼容es6导致白屏问题

解决方案

1、安装babel-polyfill 以及 es6-promise并在main.js文件中引入

// main.js
import "babel-polyfill"
import Es6Promise from 'es6-promise'
require('es6-promise').polyfill() // 在node或浏览器中支持ES6 与CommonJS
Es6Promise.polyfill()

2、修改babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
};

3、修改vue.config.js，应该按需要引入需要转码的依赖包名称，但是我无法确定报错的依赖包，所以全转了

 transpileDependencies: process.env.NODE_ENV === "development" ? ["*"] : [],

4、修改package.json

 "browserslist": [
    "> 1%",
    "last 2 versions",
    "ios >= 8",
    "android >= 4.0"
  ]

小插曲

在做完上述配置后，发现高版本的浏览器白屏，使用Chrome查看报错信息，发现是打包后的chunk-vendors.js文件报错Cannot read property ‘_android’ of undefine；解决方法为将if (this._android && this._android <= 2.1) 改为：if (this && this._android <= 2.1)