html的vue项目怎么兼容ie,vue兼容IE报错怎么解决？解决方案分享

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就可以是这样的：

Polyfill就是类似这样解决API的兼容问题

解决方案

1、使用babel-polyfill

引入 babel-polyfill

如何使用

使用它时需要在你应用程序的入口点顶部或打包配置中引入。

在main.js 引入

或者在config中的 webpack.base.conf.js中修改配置

2、在index.html 加入以下代码(非必须)

3、babel-loader 中指定模块转码

增加了poly-fill还是报错，这一般是使用了第三方的ui框架、库、插件等，并且这些ui框架、库、插件底层有es6的语法。

找到webpack.base.conf.js 中的babel-loader

比如我这里用了element-ui 跟 v-charts 修改成如下：

如果是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

总结

1、用vue 写的项目最多可以兼容到IE9 及以上版本

2、使用babel-polyfill

3、在babel-loader中指定需要转码的第三方的ui框架、库、插件路径

4、配置 .babelrc文件

5、Babel 是一个厉害的东西

补充：

问题：ie浏览器autoprefixer自动补全css前缀无效

解决方法：

ie发现使用内联样式，autoprefixer无法生效，所以需要写到style标签内。

问题：ie10打开包语法错误，如图所示

解决方法

点击app.js,跳转到报错的位置，如图

发现最后一行有个import的文件，所以锁定到错误肯定是在引入的这个文件内。

把common.js打开，检查语法，发现有个变量定义用了ES6的语法let。所以引入的文件，插件没有起作用。

没有将ES6转ES5。然后修改了之后，问题解决。

html的vue项目怎么兼容ie,vue兼容IE报错怎么解决？解决方案分享相关推荐

vue项目Error: Cannot find module ‘xxx’类报错的解决方法
现发现只要是报错 Error: Cannot find module 'xxx'(例如 Error: Cannot find module 'webpack')这类的问题都可以用下面的方法解决. 报错 ...
vue 项目初始化时，npm run dev报错解决方法
vue 项目初始化时,npm run dev报错解决方法参考文章: (1)vue 项目初始化时,npm run dev报错解决方法 (2)https://www.cnblogs.com/ruilin ...
vue 项目路由跳转时，ie报错缺少')'
vue 项目路由跳转时,ie报错缺少')' 报错信息解决办法报错信息 vue项目中使用了vue-echarts,项目启动后,在chrome上路由跳转没问题,但是在ie的控制台报"缺少 ...
vue项目在IE中显示空白，报错：vuex requires a Promise polyfill in this browser
问题描述 vue项目在非IE内核的浏览器中显示正常,在IE内核浏览器中报错,并显示空白.报错如下: SCRIPT5022: [vuex] vuex requires a Promise polyfi ...
video.js在vue项目中设置中文语言包，报错videojs is not defined 解决办法
在vue项目中使用video.js时要求中文化,但是网上的解决办法不太好找,特此记录一下. 错误步骤: 根据网上的教程,找到中文包在node_modules/video.js/dist/lang/zh ...
vue项目没有router文件夹_vueRouter没有报错，但是页面渲染空白
我的inde遇新是直朋能到分览支体调x.js代码 import Vue from 'vue'; import App from './App.vue'; import VueRouter from ' ...
解决vue项目中重复点击导航路由报错
vue版本 "vue": "^2.6.11", 主要代码 //重复点击导航路由报错 const originalPush = VueRouter.prototy ...
Pycharm连接远程服务器、使用Pycharm运行深度学习项目、Pycharm使用总结以及Pycharm报错和解决办法
Pycharm连接远程服务器,使用Pycharm运行深度学习项目以及Pycharm的使用总结文章目录 Pycharm连接远程服务器,使用Pycharm运行深度学习项目以及Pycharm的使用总结前 ...
vue项目中出现重复点击路由报错
故心故心故心故心小故冲啊文章目录解决方法: 解决方法: 方法1:在项目目录下运行 npm i vue-router@3.0 -S 重新下载未出错版本即可: 方法2:不想更换 vue-router ...
解决vue项目重复点击跳转路由报错以及路由重定向的问题
// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题 const originalPush = VueRouter.prototype.push VueRout ...

html的vue项目怎么兼容ie,vue兼容IE报错怎么解决？解决方案分享

html的vue项目怎么兼容ie,vue兼容IE报错怎么解决？解决方案分享相关推荐

最新文章

热门文章