vue 检测ie版本_分析vue 兼容IE报错解决方案
这篇文章主要为大家详细介绍了分析vue 兼容IE报错解决方案,具有一定的参考价值,可以用来参考一下。
感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧!
IE 页面空白
报错信息
【图片暂缺】
【图片暂缺】
此时页面一片空白
报错原因
Babel 默认只转换新的 JavaScript 语法(如箭头函数),而不转换新的 API ,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等新的对象或者方法。
例如 Promise 、新的原生方法如 String.padStart (left-pad) 等。为了解决这个问题,我们使用一种叫做 Polyfill(代码填充,也可译作兼容性补丁)的技术。
简单的说,兼容问题一般是IE 对于es6 的部分新对象、表达式,语法并不支持,解决方案是使用 babel-polyfill 来正常使用ES6。
Polyfill 是什么
举个例子,有些旧浏览器不支持 Number.isNaN方法,Polyfill就可以是这样的:
代码如下:
if(!Number.isNaN) {
Number.isNaN = function(num) {
return(num !== num);
}
}
Polyfill就是类似这样解决API的兼容问题
解决方案
1、使用babel-polyfill
引入 babel-polyfill
代码如下:
npm i -S babel-polyfill
如何使用
使用它时需要在你应用程序的入口点顶部或打包配置中引入。
在main.js 引入
代码如下:
import 'babel-polyfill'
或者在config中的 webpack.base.conf.js中 修改配置
代码如下:
entry:{
app:['babel-polyfill','./src/main.js']
}
2、在index.html 加入以下代码(非必须)
代码如下:
3、babel-loader 中指定模块转码
增加了poly-fill还是报错,这一般是使用了第三方的ui框架、库、插件等,并且这些ui框架、库、插件底层有es6的语法。
找到webpack.base.conf.js 中的babel-loader
比如我这里用了element-ui 跟 v-charts 修改成如下:
代码如下:
{
test: /\.js$/,
loader: 'babel-loader',
include: [
resolve('src'),
resolve('test'),
resolve('node_modules/webpack-dev-server/client'),
resolve('node_modules/v-charts/src'),
resolve('node_modules/vue-awesome'),
resolve('node_modules/element-ui/packages'),
resolve('node_modules/element-ui/src')
]
}
4、打包问题
如果是webpack代码打包出错,一般到 github webpack Issues中可以找到答案
这个错误是因为webpack-dev-server 版本问题
【图片暂缺】
5、Babel 配置 .babelrc文件
.babelrc是Babel的配置文件,放在项目根目录下。一般情况下.babelrc文件不需要修改,如果以上都做了,还是报错,可以看下官网文档来配置下该文件
【图片暂缺】
在项目使用 vue-cli 生成的代码中,根目录有一个 .babelrc 文件。在默认生成的模板内容中,增加"useBuiltIns": "entry",这是一个指定哪些内容需要被 polyfill(兼容) 的设置
useBuiltIns有三个设置
false - 不做任何操作
entry - 根据浏览器版本的支持,将 polyfill 需求拆分引入,仅引入有浏览器不支持的polyfill
usage - 检测代码中 ES6/7/8 等的使用情况,仅仅加载代码中用到的 polyfill
代码如下:
{
"presets": [
["env", {
"modules": false,
"useBuiltIns": "entry"
}],
"stage-2"
],
"plugins": ["transform-runtime", "transform-vue-jsx"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["istanbul"]
}
}
}
具体相关可以查看Babel官网:https://www.babeljs.cn/
总结
1、用vue 写的项目最多可以兼容到IE9 及以上版本
2、使用babel-polyfill
3、在babel-loader中指定需要转码的第三方的ui框架、库、插件路径
4、配置 .babelrc文件
5、Babel 是一个厉害的东西https://www.babeljs.cn/
补充:
问题:ie浏览器autoprefixer自动补全css前缀无效
解决方法:
ie发现使用内联样式,autoprefixer无法生效,所以需要写到style标签内。
问题:ie10打开包语法错误,如图所示
【图片暂缺】
解决方法
点击app.js,跳转到报错的位置,如图
【图片暂缺】
发现最后一行有个import的文件,所以锁定到错误肯定是在引入的这个文件内。
把common.js打开,检查语法,发现有个变量定义用了ES6的语法let。所以引入的文件,插件没有起作用。
没有将ES6转ES5。然后修改了之后,问题解决。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持512笔记。
注:关于分析vue 兼容IE报错解决方案的内容就先介绍到这里,更多相关文章的可以留意512笔记的其他信息。
关键词:vue.js
vue 检测ie版本_分析vue 兼容IE报错解决方案相关推荐
- vue遇到ie兼容问题如何处理_详解vue 兼容IE报错解决方案
IE 页面空白 报错信息 此时页面一片空白 报错原因 Babel 默认只转换新的 JavaScript 语法(如箭头函数),而不转换新的 API ,比如 Iterator.Generator.Set. ...
- vue 兼容IE报错解决方案
vue 兼容IE报错解决方案 参考文章: (1)vue 兼容IE报错解决方案 (2)https://www.cnblogs.com/candymanping/p/10195377.html 备忘一下.
- vue遇到ie兼容问题如何处理_vue 兼容IE报错解决方案
IE 页面空白 报错信息 此时页面一片空白 报错原因 Babel 默认只转换新的 JavaScript 语法(如箭头函数),而不转换新的 API ,比如 Iterator.Generator.Set. ...
- Interproscan linux版本详细安装教程及运行报错解决方案
解决问题:interproscan 软件 在Linux中配置(个人经验,仅供参考~) 文章目录 @[TOC](文章目录) 一.参考文档 二.需要软件 Software requirements: 三. ...
- vue 检测ie版本_Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案
Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案 解决方式:安装 "babel-polyfill" 即可. 命令:npm install --save-dev ...
- Vue兼容IE报错解决方案
兼容问题一般是IE 对于es6 的部分新对象.表达式,语法并不支持, 解决方案是使用 babel-polyfill 来正常使用ES6. 第一步: 安装babel-polyfill npm i babe ...
- Vue工程报错解决方案Warn:import Vue from “vue“;
Vue工程报错解决方案Warn:import Vue from "vue"; 参考文章: (1)Vue工程报错解决方案Warn:import Vue from "vue& ...
- yolov5的3.0版本代码在训练的时候报错:ImportError: cannot import name ‘amp‘ from ‘torch.cuda‘ 以及yolov5的3.0环境安装
欢迎大家关注笔者,你的关注是我持续更博的最大动力 原创文章,转载告知,盗版必究 yolov5的3.0版本代码在训练的时候报错:ImportError: cannot import name 'amp' ...
- python安装报错类型_解决Python安装cryptography报错问题
解决Python安装cryptography报错问题 错误一: gcc -pthread -fno-strict-aliasing -DNDEBUG -g -fwrapv -O2 -Wall -Wst ...
最新文章
- IOS NSPredicate 查询、搜索
- SET-UID程序漏洞实验
- ASP.NET Web - 服务器控件
- IDEA 程序包org.springframework.web.bind.annotation不存在
- C++将“引用”作为函数返回值类型的格式、好处和注意事项?
- Spring框架 简述
- 天下会-百度搜索技巧语法大全
- java volatile 基本类型_Java中Volatile关键字详解(转)
- CCF CSP201903-2二十四点
- navicat连接mangoDB数据库并使用
- iscc2021 easyweb
- ORA-20011 ORA-29913 KUP-11024
- Unity 3D安装教程
- 傲梅备份服务器系统,傲梅轻松备份如何还原系统的详细解析
- 笔记 | 人工智能导论 语义网络表示
- vue视频播放 切换视频地址后还播放之前的路径视频
- Leetcode_96_Unique Binary Search Trees
- 倒置字符串 将一句话的单词进行倒置,标点不倒置。
- 3. PyCharm、PyQt5、PyQt5-tools的下载安装、基于PyCharm开发PyQt5
- Gavin老师Transformer直播课感悟 - 通过Rasa Interactive对Rasa对话机器人项目实战之ConcertBot源码、流程及对话过程解密(四十三)
热门文章
- python安装pandas库cmd_python数据分析之pandas安装
- linux添加IP及路由
- npm报错 npm ERR! Error while executing:
- android 微信评论功能,Android仿微信朋友圈点赞和评论功能
- Java基础练习(二)——计算圆周率PI=4/1-4/3+4/5-4/7——青蛙在井底,井深7。爬井,白升3,晚降2——打印九九乘法表——求1+2!+3!+...+5!和 ——打印*组成的菱形图案
- Re7:读论文 FLA/MLAC/FactLaw Learning to Predict Charges for Criminal Cases with Legal Basis
- TI Sitara系列AM64x开发板(双核ARM Cortex-A53)软硬件资料规格书
- 数显之家快讯:【SHIO世硕心语】用80%的时间思考,20%的时间做事
- 苹果8怎么投屏到电视_苹果怎样投屏到电视?不用数据线,无线投屏的方法步骤...
- 我的世界无限钻石大陆服务器,我的世界有钻石大陆服务器的ip | 手游网游页游攻略大全...