vue项目问题记录:iOS10以下不支持es6

最新推荐文章于 2024-08-06 09:27:03 发布

原创最新推荐文章于 2024-08-06 09:27:03 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

博客指出iOS10以下浏览器呈现白屏，原因是不支持es6特性和语法、部分css3样式不兼容。解决办法包括在index.html中加入相关内容，安装es6-promise、babel-polyfill等依赖，更改webpack.base.conf.js入口，将es6转译为es5，对于css不兼容则调整样式。

iOS10以下浏览器呈现白屏无法正常显示页面,但是iOS10以上的浏览器显示正常.

定位原因:iOS10系统以下不支持es6的特性和语法,不兼容部分css3样式

解决:

一、在index.html中加入

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,IE=IE9"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge">

二、es6在safaris中的运行

1、安装依赖es6-promise并在main.js中引入

npm install es6-promise --save

es6-promise:若使用了ES6 promise对象，使其在Chrome、Safari浏览器下可以正常运行，但在360兼容模式、IE内核中不支持

 import Es6Promise from 'es6-promise'

 Es6Promise.polyfill()

2、安装依赖babel-polyfill并在main.js中引入

npm install babel-polyfill --save

babel-polyfill:模拟ES2015以上的环境，主要用于对ES6新语法不支持的浏览器

使用import在main.js中引入时,import "babel-polyfill"需要放在最顶部，确保全面加载

3、更改 webpack.base.conf.js 文件中的入口 entry

 entry: {
         app: ["babel-polyfill", "./src/main.js"] 
 },

到此只解决了在Safari、chorme等浏览器的正常运行,在IE中仍无法正常显示,如果需要在IE中也正常显示,需要将es6转译为es5

添加依赖:npm i babel-preset-es2015 -- save

在项目的根目录下，修改.babelrc的内容，添加'es2015'

安装依赖 npm i classlist-polyfill --save

并修改webpack.base.conf.js 文件中的入口 entry

 entry: {
         app: ["classlist-polyfill", "babel-polyfill", "./src/main.js"] 
 },

至此,将es6转译成es5,并成功运行,页面得以显示

对于css不兼容,则尽量避免使用较新的特性,需要对样式在进行调整