万恶的ie(还好只是ie11)

问题

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生效

<!-- 以下代码是只会在ie 11中执行 css hack 方法，针对不同版本的可以在网上进行搜索-->
@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这个库来进行打补丁,具体安装方法可以看链接，在这里我主要讲下怎么在使用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 => {
    //暂时不清楚，以后再来填坑
  }
}