vue 解决IOS10低版本白屏的问题

新公司是做自己的独立产品，比之前呆过的外包公司要求严格的多，注重用户体验，以下是在新项目里进行前端优化的一些操作

一，低版本空白屏问题，以及ios8的样式问题

本项目是通过vue-cli搭建，上线以后运行在新版本的苹果手机和安卓手机上均无问题。但是在ios8 9上出现了空白屏的原理，经过测试以后发现是低版本不兼容es6的语法，经过几番尝试找到了最优解。

1 空白屏问题

首先安装babel-polyfill,安装命令：npm install --save-dev babel-polyfill

安装成功后找到webpack.base.conf里把第16行的代码换成第17行的写法，如图1所示

相同的页面，加入红色方框里的代码，如图2所示

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: "babel-loader"
  },

2 样式问题

找到webpack.prod.conf文件，将注释代码替换成红色方框内的代码即可，如图3

二 打包之后的文件以及生成的vendor文件过大的问题

1打包文件过大的问题

找到config底下的index.js文件，在69行的代码productionSourceMap:true,将true改为false。不然在最终打包的文件中会出现一些map文件，map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。但是这里为了瘦身大业，可以舍去。

2生成的vendor文件过大的问题

vendor文件里会将项目中vue vue-router mint-ui element-ui等库和框架一起打包压缩，这样必定会占用空间，造成压缩包过大。通常都有好几百k至少超过1M，在加载页面的时候会极度耗时。

这里建议使用cdn 然后在build里找到webpack.base.conf，加入平常不改动的库，如图4所示，然后在入口页面index.html导入相应的cdn

同时要在项目里把诸如图5这样的导入都去除，否则打包的时候依然会占用空间，我项目里这样优化之后，vendor大小由239k优化到10k,减小的20倍

三 压缩图片 ，推荐一个压缩图片的工具 https://tinypng.com/

如果有更改好的工具可以留言告知~

补充知识：vue-cli构建的移动端项目ios9以下打开页面空白问题

造成ios9一下页面空白问题，个人遇到的是项目npm run build之后，项目里es6没有转成es5造成的。

vue-cli构建的本身已经配置好babel,es6的转码，但是还遇到这个问题。

那么可能的原因是引入的文件没有转码，像我个人把http.js写在了static/js/http.js里了。 在static这个文件夹下。项目编译这个文件本身不打包。所有写在这里的es6没有转成es5.

所有要把js文件移入src下的assets，或者自建的文件夹

ios9以下页面空白如果是其他方面引起的可以考虑在pc端IE浏览器的Edge调试。把错误都排除了，能够页面显示出来，那么基本就成功了。

IE会报vuex requires a Promise polyfill in this browser这个错误，成这种现象的原因归根究底就是浏览器对ES6中的promise无法支持，因此需要通过引入babel-polyfill来是我们的浏览器正常使用es6的功能

解决办法：安装babel-polyfill这个依赖 cnpm install –save-dev babel-polyfill

然后在build下的webpack.base.conf.js文件中，使用

const webpackConfig = {
 context: path.resolve(__dirname, '../'),
 entry: {
  app: ["babel-polyfill", "./src/main.js"]
 }

以上这篇vue 解决IOS10低版本白屏的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 完美解决axios跨域请求出错的问题

    完美解决axios跨域请求出错的问题

    错误信息: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. The response had HTTP status code 403

  • 解决vue 使用axios.all()方法发起多个请求控制台报错的问题

    今天在项目中使用axios时发现axios.all() 方法可以执行但是控制台报错,后来在论坛中看到是由于axios.all() 方法并没有挂载到 axios对象上,需要我们手动去添加 == 只需要在你封装的axios文件里加入 == instance.all = axios.all 就完美解决了! 补充知识:vue项目中使用axios.all处理并发请求报_util2.default.axios.all is not a function异常 报错: _util2.default.axios.

  • VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决

    问题现象 项目使用vue/cli3脚手架搭建的前端项目,vue版本为2.6.10. browserslist的配置如下: [ "> 1%", "last 2 versions"] 但开发环境的IE11打开显示白屏,F12打开显示: 分析过程 5306行显示 "./node_modules/_debug@4.1.1@debug/src/browser.js"这个路径报错,由于eval()包含的代码中有ES6的语法,IE不支持,查了网上很多资料

  • 详解Vue-axios 设置请求头问题

    在axios向后端传参时需要设置请求头,确保请求参数的格式为JSON字符串(此时用JSON.stringify(obj)无效时) this.$axios({ method:'', url:'', headers: { 'Content-Type': 'application/json',//设置请求头请求格式为JSON 'access_token': this.token //设置token 其中K名要和后端协调好 }, params:{} }).then((response)=>{}) 下面看

  • vue 解决IOS10低版本白屏的问题

    vue 解决IOS10低版本白屏的问题

    新公司是做自己的独立产品,比之前呆过的外包公司要求严格的多,注重用户体验,以下是在新项目里进行前端优化的一些操作 一,低版本空白屏问题,以及ios8的样式问题 本项目是通过vue-cli搭建,上线以后运行在新版本的苹果手机和安卓手机上均无问题.但是在ios8 9上出现了空白屏的原理,经过测试以后发现是低版本不兼容es6的语法,经过几番尝试找到了最优解. 1 空白屏问题 首先安装babel-polyfill,安装命令:npm install --save-dev babel-polyfill 安装

  • 解决vue build打包之后首页白屏的问题

    1.问题描述 本地的vue项目在server端浏览没问题,但是执行npm run build 打包之后在本地预览是白屏.有很多js,css无法加载. 2.解决方法 在config文件夹中找到index.js打开把assetsPublicPath: '/'改成下图方框中的样子. 再次执行 npm run build 就可以了. 以上这篇解决vue build打包之后首页白屏的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue2.0使用过

  • 基于jQuery解决ios10以上版本缩放问题

    具体代码如下所示: <script type="text/javascript"> /*解决ios10以上版本缩放问题 20171102*/ window.onload=function () { document.addEventListener('touchstart',function (event) { if(event.touches.length>1){ event.preventDefault(); } }) var lastTouchEnd=0; do

  • 完美解决IE低版本不支持call与apply的问题

    Function.prototype的apply和call是在1999年发布的ECMA262 Edition3中才加入的(1998年发布ECMA262 Edition2).在此前的的浏览器如IE5.01(JScript 5.0)中是没有apply和call的.因此会带来一些兼容性问题,以下是修复方式: 复制代码 代码如下: if(!Function.prototype.apply){     Function.prototype.apply = function(obj, args){     

  • vue3+vite兼容低版本的白屏问题详解(安卓7/ios11)

    目录 如何兼容ios11 如何兼容安卓7 如何使用@vitejs/plugin-legacy 补充知识:vue打包项目以后白屏和图片加载不出来问题解决方法 总结 vue3打包后在低版本浏览器或webview中出现白屏,原因就是因为语法兼容问题.根据vite官方文档描述,build.target默认支持 Chrome >=87.Firefox >=78.Safari >=14.Edge >=88 传送,所以需要我们手动兼容低版本. 本篇以vite2.安卓7/ios11为例. 如何兼容

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

    最近遇到一个问题,用 Vue 开发的项目在最近两年新出的安卓手机上没问题,在三四年前的旧手机上出现白屏问题.分析一下应该是安卓系统版本的原因,目前已知的是Android 6.0 以上都 OK,6.0 以下就不行了. 低版本安卓系统内置的 webview 不支持 ES6 语法等一些新特性,所以报错.但在手机上调试不方便,受一篇文章的启发, IE 浏览器也是同样的问题,所以可以在 IE 上调试,一个调好了两个就都好了.突然发现万恶的 IE 还是有点用的- 网上的文章大部分是 Vue-cli 2.x

  • 完美解决Android App启动页有白屏闪过的问题

    应用启动的时候有短暂的白屏,如图: 可以通过设置theme的方式来解决 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item

  • 详解一次Vue低版本安卓白屏问题的解决过程

    详解一次Vue低版本安卓白屏问题的解决过程

    因为业务需要一定要使用安卓4.4的webview浏览页面,测试的时候发生了白屏问题,很自然想到使用babel转换部分ES6语法. Babel 转换 Promise 和 Symbol ES6语法的配置 # 两项都需要放到生产依赖 npm install babel-polyfill --save npm install es6-promise --save // main.js import 'babel-polyfill'; import Es6Promise from 'es6-promise

  • 解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题

    Vue使用swiper插件时特别是轮播元素含有动态数据时可能会出现数据为空或者白屏的问题 使用下面的方法可以解决(保证在数据请求之后再渲染页面) 页面结构 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide tpOne" v-if="topInfo"> <-- 此处为绑

随机推荐