ie input兼容 vue_Vue项目与IE11兼容

Vue不支持IE8及以下版本，因为Vue使用了IE8无法仿真的ECMAScript 5功能. 但是对于IE9 +，仅支持Vue的底层.

在开发过程中，我们经常使用一些第三方插件或组件. 对于这些组件，有时我们需要做一些处理. 下面主要说明如何使用vue-cli3脚手架项目来支持IE11.

IE11打开Vue项目(Vue CLI)进行构建，并显示空白页面，控制台警告和错误.

例如:

项目的package.json文件中的browserslist字段(或单独的.browserslistrc文件)指定了项目目标浏览器的范围. @ babel / preset-env和Autoprefixer将使用此值来确定需要翻译的JavaScript功能和需要添加的CSS浏览器前缀.

.browserslistrc

> 1%last 2 versions

not ie < 11

默认的Vue CLI项目将使用@ vue / babel-preset-appvue.js 浏览器兼容性，该应用程序使用@ babel / preset-env和浏览器列表配置来确定项目所需的polyfill.

默认情况下，它将useBuiltIns: 'usage'传递给@ babel / preset-env，以便它将根据源代码中显示的语言功能自动检测所需的polyfill. 这样可以确保最终包装中的填充胶数量最少. 但是，这也意味着，如果其中一个依赖项需要特殊的polyfill，Babel默认情况下将无法检测到它.

在Vue CLI中，提供了三种方法:

// babel.config.js

module.exports = {

presets: [

[@vue/app, {

polyfills: [

es6.promise,

es6.symbol

]

}]

]

}

提示: 我们建议您以这种方式添加polyfill，而不是直接将其导入源代码中，因为如果浏览器列表目标中不需要此处列出的polyfill，则会自动将其排除

我们使用最简单，最直接的方法(但性能并不是最好的方法)！

第一步: 在babel的相关配置文件(babel.config.js的babel字段，.babelrc或package.json)中添加“ useBuiltIns”: “ entry”信息. babel 7版本之后，会有差异-这里

babel.config.js

{

presets: [

[

@babel/preset-env,

{

useBuiltIns: entry

}

]

]

}

{

presets: [

[

@babel/preset-env,

{

useBuiltIns: entry

}

]

]

}

！！！信息令人困惑，通常有几种混合方式，这是不合理的！

第2步: 安装'@ babel / polyfill'并在条目文件中添加import'@ babel / polyfill'

$ npm install --save @babel/polyfill

main.js

import @babel/polyfill

请注意vue.js 浏览器兼容性，在Babel 7.4.0之后，该软件包已被弃用. 官方建议是改用core-js / stable和regenerator-runtime / runtime. -@ babel / polyfill

这时，我们已经根据官方要求进行了配置，重新启动了项目，发现它仍然不起作用！ ！

Babel-loader默认情况下会忽略node_modules中的所有文件. 如果要通过Babel显式转换依赖项，则可以在transpileDependencies选项中列出它.

下一步: 使用babel转换elementUI和vuex(需要Promise polyfill-在这里).

根据Vue CLI提供的三种解决方案中的第一种:

如果依赖项基于目标环境不支持的ES版本: 将其添加到vue.config.js中的transpileDependencies选项. 这将启用语法转换和基于此依赖项用法的polyfill检测.

vue.config.js

transpileDependencies: [/node_modules[/\\\\](element-ui|vuex|)[/\\\\]/],

根据您项目的实际情况，此处可能不需要element-ui

填充代理对象.

下一步: 在index.html文件中引入es6-proxy-polyfill.js

根据项目的实际情况，看是否有必要介绍. 如果已引入，建议先下载到本地，然后再导入.

至此，项目终于不是空白页了！ ！

但是，有很多印刷错误！

因为CSS var()在我们的项目中使用了很多，所以IE11不兼容，想法是一样的，只是找到相应的polyfill. 在这里，我们使用了css-vars-ponyfill

$ npm install --save css-vars-ponyfill

main.js

import cssVars from css-vars-ponyfill

cssVars({})

您完成了！

简而言之，所有处理都以兼容的方式围绕到IE11的转换. 对于JavaScript语法，它是babel的控件；对于CSS语法，需要进行具体分析.

不再对IE Microsoft进行维护，我们希望我们所有的前端朋友都能尽快摆脱这片苦海！

欢迎关注“超级前端”微信公众号

本文来自电脑杂谈，转载请注明本文网址：

http://www.pc-fly.com/a/jisuanjixue/article-283774-1.html