vue兼容IE错误报告解决方案详细说明

工业工程页面空白

错误报告信息

此时，页面是空白的

错误报告原因

默认情况下，Babel只转换新的JavaScript语法(如箭头函数)，而不是新的API，如迭代器、生成器、集合、映射、代理、反射、符号、承诺等新的对象或方法。

例如，Promise，新的本机方法，如String.padStart(左pad)等。为了解决这个问题，我们使用了一种叫做Polyfill(代码填充，也可以翻译为兼容性补丁)的技术。

简单来说，兼容性问题就是IE不支持es6的一些新对象、表达式和语法。解决办法是用巴别塔-polyfill正常使用ES6。

什么是Polyfill

例如，一些旧浏览器不支持Number.isNaN方法，Polyfill可能如下所示：

if(！number . isnan){ number . isnan=function(num){ return(num！==num)；} } Polyfill就是这样解决API的兼容性问题

解决办法

1.使用巴贝尔-多菲尔

介绍巴别尔-波利希尔

如何使用npm i -S巴别塔-polyfill

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

main.js中引入

导入“babel-polyfill”或在配置中修改webpack.base.conf.js中的配置

entry : { app :[' babel-poly fill '，'。/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形图，并对它们进行了如下修改：

{ test: /\。js $/loader : ' babel-loader '，包括： [ resolve('src ')、resolve('test ')、Resolve(' node _ modules/web pack-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)

如果打包网络包代码时出现错误，通常可以在github网络包问题中找到答案

此错误是由于网络包开发服务器版本问题造成的

5.巴贝尔配置。babelrc文件。Babelrc是babel的配置文件，放在项目的根目录下。在正常情况下。不需要修改babelrc文件。如果完成以上所有操作并报告错误，您可以查看官方网站文档来配置文件。

在项目使用vue-cli生成的代码中，根目录下有一个. babelrc文件。向默认生成的模板内容添加“使用内置”:“条目”，这是一个指定哪些内容需要多填充(兼容)的设置

用户内置有三种设置

false-什么都不做入口-根据浏览器版本的支持，拆分polyfill需求，只引入浏览器不支持的polyfill用法-检测代码中ES6/7/8的用法，只加载poly fill { ' preferences ' : [' Env '，{ 'modules': false，' useBuiltIns': 'entry' }，' stage-2' ]，' plugins ' :[' transform-runtime '，' transform-vue-jsx']，Env ' Env '

摘要

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

2.使用巴贝尔-多菲尔

3.指定要在babel-loader中进行代码转换的第三方的ui框架、库和插件路径

4.配置。babelrc文件

5.巴别塔是一个强大的东西，https://www.babeljs.cn/

补充：

问题：ie浏览器autoprefixer自动完成css前缀无效

解决方法：

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

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

解决办法

点击app.js跳转到错误位置，如图

发现最后一行有导入文件，那么锁定错误一定是在导入文件中。

打开common.js，检查语法，发现一个变量定义使用了ES6语法let。因此，导入的文件和插件不起作用。

ES6没有转移到ES5。然后，经过修改，问题就解决了。

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