万恶的ie(还好只是ie11)

喜欢ヅ旅行 2022-05-17 00:36 221阅读 0赞

## 问题 ##

ie 11 兼容性问题：主要体现于以下两点：1.布局错乱2.Promise等ES6新特性不支持，需要`babel-polyfill`

*  布局错乱  
    主要原因：原来我以为这是ie 11对`max-width`,`min-width`的支持薄弱造成的，但后来经过试验发现`min-width`,`max-width`显示是正常的，但我的解决方法是通过把对应的`div`标签的`min-width`,`max-width`,`width`设为相等的一个数，然后让这个属性只对ie11生效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        #id-selector { max-width: 353px !important; min-width: 353px !important; width: 353px !important; }
    }

*  ie11不支持ES6新的Api(如`Promise`)  
    解决方法是通过增加[`babel-polyfill`][babel-polyfill]这个库来进行打补丁,具体安装方法可以看链接，在这里我主要讲下怎么在使用`Vue-cli3 + typescript`生成的项目中使用(注意此时使用的是webpack4),而我们主要是对webpack进行配置

// wenpack4升级后没有了webpack.base.conf.js,webpack.dev.conf.js等乱七八糟的文件，因为这些webpack4都默认给你配置了,我们只需要对某些向进行配置就可以了
    // vue.config.js
    
    module.exports = {
      devServer : {
        // 可以在这里配置跨域
      },
      configureWebpack: config => {
        // 在这里可以对不同环境下的打包方式进行配置
        // 我们更改的主要配置：程序的入口文件也是在这里
        // 注意要先添加这个模块哦
        config.entry.app = ['babel-polyfill', './src/main.ts'];
      }，
      chainWebpack: config => {
        //暂时不清楚，以后再来填坑
      }
    }

[babel-polyfill]: https://www.babeljs.cn/docs/usage/polyfill/