Polyfill
浏览器兼容-polyfill的使用
ie浏览器下,vue项目遇到的问题,基本就是语法的兼容,一般引入polyfill就可以了,具体方法有三种,vue官网也都讲了,不考虑包的大小问题,一般最省事的就是用第三种方法:
请使用 useBuiltIns: ‘entry’ 然后在入口文件添加 import ‘@babel/polyfill’。这会根据 browserslist 目标导入所有 polyfill,这样你就不用再担心依赖的 polyfill 问题了,但是因为包含了一些没有用到的 polyfill 所以最终的包大小可能会增加。
// src/main.js // 优先引入此项
import '@babel/polyfill'
// -------------------------------------
// babel.config.js
module.exports = {
presets: [
['@vue/app',
{
useBuiltIns: 'entry'
}
]
]
}
但是
我遇到的问题是,已经引入了polyfill,之前ie也是正常展示的,今天突然发现他挂了,报错如下:
崩溃好几次,还是静下心来看错误,发现是由于 node_modules里有个依赖包,语法里含有 const
导致ie无法解析。
增加了poly-fill还是报错,这一般是使用了第三方的ui框架、库、插件等,并且这些ui框架、库、插件底层有es6的语法。根据这里提出的解决办法:通过webpack重新编译指定的文件。
我当前使用的是vue-cli3搭建的项目,没有webpack.config.js,但是官网指出我们可以在vue.config.js中直接配置:
调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象,
该对象将会被 webpack-merge 合并入最终的 webpack 配置。
'/node_modules/ansi-regex’就是我的项目报错地方指出的依赖
chainWebpack: (config) => {
const babelRule = config.module.rule('babel')
babelRule.uses.clear()
babelRule
.test(/\.js$/)
.exclude.add(path.resolve(__dirname, '/node_modules/ansi-regex'))
.end()
.use('babel-loader')
.loader('babel-loader')
},
然后重启项目,就可以啦。ps:今天下午都跟这个耗上劲了,发出来大家一起踩坑,有用的话请留个jio印。
还有,遇到报错,要冷静分析,找准问题所在就解决一半了