vue/cli 4.5 浏览器兼容性

browserslist

你会发现有 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件)，指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。

> 1%
not ie <= 10
last 2 versions
not dead

Polyfill

如果该依赖交付 ES5 代码，但使用了 ES6+ 特性且没有显式地列出需要的 polyfill (例如 Vuetify)：请使用 useBuiltIns: 'entry' 然后在入口文件添加 import 'core-js/stable'; import 'regenerator-runtime/runtime';。这会根据 browserslist 目标导入所有 polyfill，这样你就不用再担心依赖的 polyfill 问题了，但是因为包含了一些没有用到的 polyfill 所以最终的包大小可能会增加

babel.config.js

module.exports = {
  presets: [
    "@vue/cli-plugin-babel/preset",
    [
      "@babel/preset-env",
      {
        useBuiltIns: "entry",
        corejs: 3
      }
    ]
  ]
};

main.js

import "core-js/stable";
import "regenerator-runtime/runtime";

transpileDependencies

在 vue.config.js 设置， 要看你的项目中是否引用第三方 es6+ 的插件

module.exports = {
  transpileDependencies: []
}

在ie中地址发生变化时候，页面不跳转 App.vue

<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <router-view />
    </div>
  </a-config-provider>
</template>
<script>
import zhCN from "ant-design-vue/es/locale/zh_CN";

export default {
  data() {
    return {
      locale: zhCN
    };
  },
  mounted() {
    function checkIE() {
      return (
        "-ms-scroll-limit" in document.documentElement.style &&
        "-ms-ime-align" in document.documentElement.style
      );
    }

    if (checkIE()) {
      window.addEventListener(
        "hashchange",
        () => {
          var currentPath = window.location.hash.slice(1);

          if (this.$route.path !== currentPath) {
            this.$router.push(currentPath);
          }
        },
        false
      );
    }
  }
};
</script>
<style lang="less">
#app {
  height: 100%;
}
</style>

IE禁用Backspace键返回上个页面

转自https://www.cnblogs.com/yysbolg/p/13747878.html

//处理键盘事件 禁止后退键（Backspace）密码或单行、多行文本框除外
 function banBackSpace(e){   
         var ev = e || window.event;//获取event对象   
          var obj = ev.target || ev.srcElement;//获取事件源   
          var t = obj.type || obj.getAttribute('type');//获取事件源类型  
          //获取作为判断条件的事件类型
         var vReadOnly = obj.getAttribute('readonly');
          //处理null值情况
          vReadOnly = (vReadOnly == "") ? false : vReadOnly;
        //当敲Backspace键时，事件源类型为密码或单行、多行文本的，
        //并且readonly属性为true或enabled属性为false的，则退格键失效
         var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea") && vReadOnly=="readonly")?true:false;
         //当敲Backspace键时，事件源类型非密码或单行、多行文本的，则退格键失效
        var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea") ?true:false;        
        
        //判断
         if(flag2){
            return false;
         }
         if(flag1){   
            return false;   
        }       
 }
 
 window.onload=function(){
     //禁止后退键 作用于Firefox、Opera    
     document.onkeypress=banBackSpace;    
      //禁止后退键  作用于IE、Chrome
     document.onkeydown=banBackSpace;
 }

解决vue项目在IE中请求缓存的问题

request.interceptors.request.use(config => {
  const token = storage.get(ACCESS_TOKEN);
  // 如果 token 存在
  // 让每个请求携带自定义 token 请根据实际情况自行修改
  if (token) {
    config.headers["Access-Token"] = token;
  }
  if (config.url.indexOf("?") > -1) {
    config.url = config.url + `&n=${Math.random()}`;
  } else {
    config.url = config.url + `?n=${Math.random()}`;
  }
  return config;
}, errorHandler);