详解vue 兼容IE报错解决方案

2024-09-29 08:10:25

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 加入以下代码（非必须）

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

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。然后修改了之后，问题解决。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue踩坑记-在项目中安装依赖模块npm install报错

在维护别人的项目的时候,在项目文件夹中安装npm install模块的时候,报错如下: npm ERR! path D:\ShopApp\node_modules\fsevents\node_modules\abbrev npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! syscall access npm ERR! enoent ENOENT: no such file or directory, access 'D:\ShopApp\nod
vue 中使用 watch 出现了如下的报错的原因分析

报错: Method "watch" has type "object" in the component definition. Did you reference the function Method "watch" has type "object" in the component definition. Did you reference the function correctly? 原因: watch 是一个对
详解Vue iview IE浏览器不兼容报错（Iview Bable polyfill）

由于Iview编译使用到了es6的一些新特性,Internet Explorer所有版本中都会报错,缺少includes.findIxdex等问题. 本人研究涉及到的环境:VueCli3.2 + iview 3.1.5 在IE中不支持ES6的新特性,例如:includes.findIndex-- 以下方案可以解决该问题: 1. Github iview仓储Issues中提到的改编译范围请用 transpileDependencies: ['iview'],不要用 include.add,因为
vue项目中使用vue-i18n报错的解决方法

前言 Vue-i18n大家应该都不陌生,Vue-i18n安装的安装方法如下: npm install vue-i18n --save 然而最近在vue项目中使用vue-i18n的时候,居然报错了,通过查找相关的资料终于找到了解决的方法,下面话不多说了,来一起看看详细的介绍吧发现问题 iview-admin框架克隆到本地,添加路由的时候,稍不注意就会遇到以下情况: Value of key 'xxx' is not string! Cannot translate the value of ke
vue安装遇到的5个报错及解决方法

前言这篇博文不会教你怎么安装vue,但会告知安装过程中可能遇到的5个问题 5个报错 ①:若使用vue -V查询是否安装vue时提示没有找到指令,可能是你没有安装vue-cli脚手架(vue-cli可快速创建vue项目) ②:vue安装淘宝镜像时报错,提示无效的配置,必须是完整合法的http地址,原因是我在url前面加了1个空格,这里不要有空格注:安装淘宝镜像后,需要用到npm的地方都可以用cnpm替换,但建议安装模块和插件用cnpm,打包和启动vue用npm (cnpm是国
vue component 中引入less文件报错 Module build failed

错误是这样发生的: //在vue component组件中引入less文件 <style lang="less"> @import '@/assets/css/public/layout.less'; </style> 然后就报错了: Module build failed: @import '@/assets/css/public/layout.less'; ^ Can't resolve './@/assets/css/public/layout.less'
详解vue 兼容IE报错解决方案

IE 页面空白报错信息此时页面一片空白报错原因 Babel 默认只转换新的 JavaScript 语法(如箭头函数),而不转换新的 API ,比如 Iterator.Generator.Set.Maps.Proxy.Reflect.Symbol.Promise 等新的对象或者方法. 例如 Promise .新的原生方法如 String.padStart (left-pad) 等.为了解决这个问题,我们使用一种叫做 Polyfill(代码填充,也可译作兼容性补丁)的技术. 简单的说,兼容问题
详解vue微信网页授权最终解决方案

vue微信网页授权,基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios,开发的微信授权方案.项目地址:vue-wechat-auth 参考了[vue-wechat-login],思路有些不同,本文基于进入所有页面都必须先授权的操作. 与之前写的授权不同之处这次的逻辑全部在router的beforeEach进行,相较更加简洁明.之前是在一个中间页author.vue中,加上微信授权要跳转很多次在这里你能找到微信网页授权前端解决方案,官方文
详解Anaconda安装tensorflow报错问题解决方法

最近脱离了googlecolab想使用本地的anaconda进行机器学习课题的演练,在安装tensorflow时报错 : UnsatisfiableError: The following specifications were found.下面给出解决方法. 发现实际原因是由于anaconda的python环境,当前版本的tensorflow只能适用于python 3.5 3.6 3.7等衍生版本,而anaconda自带的python版本为3.8. 首先打开控制台使用以下命令可以查看当前的a
详解vue或uni-app的跨域问题解决方案

常见解决方案有两种服务器端解决方案服务器告诉浏览器:你允许我跨域具体如何告诉浏览器,请看: // 告诉浏览器,只允许 http://bb.aaa.com:9000 这个源请求服务器 $response->header('Access-Control-Allow-Origin', 'http://bb.aaa.com:9000'); // 告诉浏览器,请求头里只允许有这些内容 $response->header('Access-Control-Allow-Headers', 'Author
详解vue配置请求多个服务端解决方案

一.解决方案 1.1 描述接口context-path 后端的两个接口服务请求前缀,如下: 前缀1: /bryant 前缀2: / 1.2 vue.config.js配置 devServer: { port: 8005, proxy: { // 第一台服务器配置 '/bryant': { target: 'http://localhost:8081, ws: true, changeOrigin: true, pathRewrite: { '^/bryant': '/bryant' } }, /
vue之webpack -v报错解决方案总结

小白学习一下vue,然后了解到了webpack相关的知识,然后就各种安装 cnpm 是国内的源相比国际源要快很多,不知道cnpm的自己查一下吧. cnpm install -g webpack 等一会安装成功了,我就想看一下webpack 的版本又提示我要安装webpack-cli,那就安装吧 cnpm install -g webpack-cli 等一会就安装好了,再看一下webpack -v就报下面的错了. $ webpack -v C:\Users\Administrator\AppDa
详解Vue开发网站seo优化方法

因为用了vue等js的数据绑定机制来展示页面数据,爬虫获取到的html是模型页面而不是最终数据的渲染页面,搜索引擎是不回去执行请求到的js.vue的项目都是ajax请求数据,引擎爬虫进入页面获取不到文字内容,现在大多数解决方案是不采用ajax渲染数据,而是采用server端渲染,也就是所谓的SSR. 目前基于vue的方案是Nuxt.js,同类型的也有React版的Nuxt.js所以服务端渲染就是尽量在服务器发送到浏览器前,页面上是有数据可让爬虫进行爬取方法一.利用prerender-spa-p
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结

如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 1. Vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的. 场景: var vm = new Vue({ data:{}, // 页面不会变化 template: '<div>{{message}
详解Vue Cli浏览器兼容性实践

浏览器市场占有率在处理浏览器兼容性问题之前,我们先来看一下现在的浏览器市场份额是怎样的,
详解Vue+elementUI build打包部署后字体图标丢失问题

错误描述: Vue+elementUI build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 dom渲染展示解决方法: webpack module配置:(build目录下webpack.base.conf.js) module: { rules: [ ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /\.(

详解vue 兼容IE报错解决方案

相关推荐

随机推荐