vue 工程化项目兼容IE浏览器处理汇总

334 阅读2分钟

前言:最近处理vue-cli脚手架兼容IE11时,在网上找了办法试了试,都没有彻底解决,查找到的资料都很杂乱,getMore老弟根据自己项目的解决方式以及网上查找到的解决方式做个汇总~

当前前端vue项目用的最多的两种打包形式

  • 自己书写webpack打包规则
  • 使用vue-cli脚手架,脚手架里已经自带了大部分webpack配置

遇到以上两种情况下兼容应该怎么配置

一、项目使用的自定webpack规则

npm install babel-polyfill --save // 安装babel-polyfill编译js的高级语法

在main.js中的最前面引入import 'babel-polyfill'(注:必须引入在最前面,保证所有es6语法都会被解析)

// 在项目里找到webpack.base.conf.js文件

module.exports = {
  entry: {
    app: './src/main.js'
  },
  }
// 替换代码
module.exports = {
    entry: ['babel/polyfill', resolve('src/main.js')]
}

这样配置后,如果没使用特殊第三方包和babel/polyfill不支持的高级语法,就基本解决了问题;如果还是有问题的话配置.babelrc文件,官网如下: www.babeljs.cn/ 根据项目选择引入什么插件,以及如何配置,详情查看官网。

二、使用的vue-cli

npm install --save @babel/polyfill // 第一步:安装语法解析第三方包

import '@babel/polyfill' // 第二步:main.js代码最前面加入

// 第三步:编辑.babelrc
{
    "presets": [["@vue/app", { "useBuiltIns": "entry" }]]
}

// 第四步:编辑vue.config.js
transpileDependencies: ['element-ui', 'v-eharts'],// 配置node_modules中指定哪些文件夹或文件需要编译

chainWebpack: config => {
    config.entry('polyfill').add('@babel/polyfill')
},

经过以上操作还出现问题的话,要么是项目中在部分代码实现不规范,要么就是@babel/polyfill没有编译到当前项目中引用的第三方包;解决的办法就是将main.js里引入的第三方包都加入到vue.config.js中的transpileDependencies配置里

image.png

解决兼容问题的核心其实就是确保项目中用到的高级语法和第三方包都被编译,这样就不会报错啦。

最后:愿世上没有IE,╮( ̄▽ ̄)╭