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