解决IE版本兼容

背景介绍

IBPS平台3.0以上版本框架采用vue-cli3,整体采用语法多为es6为主,本身内置了es6转译es5得方法。但是整体方面对于IE9以上版本得兼容还是存在问题,对此还是需要对IE浏览器做兼容。有些不能自动转译,需手动转译。

现在查阅这里了解vue-cli3兼容方案。

问题一:无法在IE正常加载

1、vue-cli 升级

升级到最新版本(更多代码看具体代码)

2、babel.config 配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  // 允许两种编码引入方式共存,也就是 common 规范与 es6 规范的共存处理
  sourceType: 'unambiguous'
}

3、转译element-ui

平台整体UI采用element-ui去实现前端页面的样式渲染,有些组件采用element-ui的帮助类
采用官方方式(该方法不行)
vue.config.js添加一个属性去额外的转译element-ui的文件包

module.exports = {
...
transpileDependencies: ['element-ui'],
...
}

可行办法
自己引入帮助类

替换是有用

4、转译其他不自动转移的第三方库

transpileDependencies: 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来。

  transpileDependencies: [
    'signature_pad',
    'vue-echarts',
    'resize-detector'
  ],

5、路由方式改进

更多优化看代码

执行上述操作后重启项目,关闭之前打开的IE浏览器,在项目重启完毕之后打开IE浏览器重新打开项目便可。

文档更新时间: 2019-12-31 17:18   作者:庄晓晖