从 ie10浏览器下Symbol 未定义的问题 探索vue项目如何兼容ie低版本浏览器(ie9, ie10, ie 11 )
问题:
vue项目在ie11下一片空白并报Symbol 未定义的错
原因:
ie10浏览器解析不了es6的语法,需要我们使用babel(Babel是一种工具链,主要用于将ECMAScript 2015+代码转换为当前和旧版浏览器或环境中的向后兼容版本的JavaScript)。但是Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API ,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign)都不会转码。
解决:
1.在vue项目中安装babel-polyfill
polyfill指的是“用于实现浏览器不支持原生功能的代码”,比如,现代浏览器应该支持fetch函数,对于不支持的浏览器,网页中引入对应fetch的polyfill后,polyfill就给全局的window对象上增加一个fetch函数,让这个网页中的JavaScript可以直接使用fetch函数了,就好像浏览器本来就支持fetch一样。
npm install --save-dev babel-polyfill
2.在mian.js中引入babel-polyfill(要在引入vue,vuex,elementui 之前引入)
import 'babel-polyfill';
重启项目,正常显示啦!
注意: vue不持之ie8 以及之前的版本
从 ie10浏览器下Symbol 未定义的问题 探索vue项目如何兼容ie低版本浏览器(ie9, ie10, ie 11 )的更多相关文章
- AngularJS开发指南7:AngularJS本地化,国际化,以及兼容IE低版本浏览器
AngularJS本地化,国际化 国际化,简写为i18n,指的是使产品快速适应不同语言和文化. 本地化,简称l10n,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的 ...
- WebSocket兼容到低版本浏览器
就目前而言,WebSocket是最好的Web通信解决方案了.但是IE从10才开始兼容它,对于目前大量IE8存在的市场,原生的WebSocket显然不太实用,我们需要低版本兼容的解决方案.于是我模拟We ...
- 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现,兼容ie低版本浏览器
项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 2012-04-25 16:29:04| 分类: 学习 |字号 订阅 在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE ...
- 使用html5兼容低版本浏览器
因为html5 新出的一些语义化的标签,在低版本浏览器下不能识别,举个例子,比如你写了一个 header 标签中,写了一段文本,在低版本浏览器下,肯定是能看到的,但是,那是他是不认识 header标签 ...
- 低版本浏览器支持HTML5标签的方法
最近刷了一道面试题,是关于低版本浏览器支持HTM5标签的写法,在网上找了一些,都行之有效,但是缺少整体总结,所以在这里总结一下,方便其他人过来阅读. IE低版本需要支持HTML5标签: 方法1.传统引 ...
- jQuery效果之封装模拟placeholder效果,让低版本浏览器也支持
页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" pla ...
- Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案
Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案 解决方式:安装 "babel-polyfill" 即可. 命令:npm install --save-dev ...
- React+Webpack+ES6 兼容低版本浏览器(IE9)解决方案
虽然过了兼容IE6的噩梦时代,IE依旧阴魂不散,因为你可能还要兼容IE9.在ES6已经普及的今天,用ES6写react已经成了标配.但是babel编译的js语法,由于某些不规范的写法,可能在IE9下不 ...
随机推荐
- 用Storyboard构建标签栏多页面应用程序UI
注: 貌似CSDN的显示效果不佳,假设有须要的话我能够上传pdf格式的: 另外假设文章中有错误还请给位多多提意见,谢谢. pdf格式文档:http://download.csdn.net/detail ...
- linux基础-第十八单元_nginx部署
一.基本环境配置 1.1.安装常用软件 yum install wget -y 1.2.Install yum repo mv /etc/yum.repos.d/CentOS-Base.repo /e ...
- 使用unity3d开发app
做过一些项目,参入过一些项目的计划安排.总觉得一些工具用起来很麻烦,要么是要收费,要么很大很重.没有针对小团队的简单易用的任务管理工具,也可能是找了些不能适合自己的习惯. 所有准备开始自己开发一款项目 ...
- 解决Ubuntu环境变量错误导致无法正常登录 (command 'xxx' is available in bin ls)
一.问题产生 配置JDK时,按照搜索到的一篇文章中的做法,修改了/etc/profile文件里的内容.在原内容保持不变的基础上,大致添加了以下内容: export JAVA_HOME=.... exp ...
- Bat 替换文件中的字符串
echo off setlocal enabledelayedexpansion set "file=Config\__Config\server_config_common.xml&quo ...
- iOS CoreImage之滤镜简单使用
代码地址如下:http://www.demodashi.com/demo/11605.html 老骥伏枥,志在千里 前记 最近一直在研究图像处理方面,既上一篇iOS Quart2D绘图之UIImage ...
- 【方法1】删除Map中Value反复的记录,而且仅仅保留Key最小的那条记录
介绍 晚上无聊的时候,我做了一个測试题,測试题的大体意思是:删除Map中Value反复的记录,而且仅仅保留Key最小的那条记录. 比如: I have a map with duplicate val ...
- SSM&SSH项目中 springmvc 乱码问题解决
需要在web.xml文件中配置过滤器: <!-- 过滤器 过滤乱码 --> <filter> <filter-name>characterEncodingFilte ...
- pandas 绘图与滑窗
#import nessary library before start import pandas as pd import numpy as np import matplotlib.pyplot ...
- windows服务器下配置memcache最大内存值
windows服务器下修改memcache配置要求如下: 1.用内网ip的方式提供web应用服务器调用,不允许直接通过外网调用,如将memcache服务放在192.168.1.168的服务器上 2.修 ...