vue兼容IE注意事项

2020-01-14

摘要：使用 vue 全家桶开发后台管理系统兼容 IE 总结

问题一

问题：兼容IE浏览器配置，es6 转 es5
解决方法：
1、安装 @babel/polyfill 包

1	npm install @babel/polyfill --save-dev

2、在 main.js 中引入

1	import '@babel/polyfill'

3、配置 babel.config.js

module.exports = {
  presets: [
    [
      '@vue/app',
      {
        useBuiltIns: 'entry'
      }
    ]
  ]
}

4、配置 package.json 中的 browserslist 属性，或者 .browserslistrc 文件

// package.json
{
  ...,
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "ie > 9"
  ]
}

// .browserslistrc 文件
# Browsers that we support

> 1%
last 2 version
ie > 9

此时，使用命令 npx browserslist 可以查看当前支持的浏览器版本

问题二

问题：配置问题1后，cli 默认不转换 node_module 中的模块，比如只在登录页引入的 vue-particles
解决方法：
在 vue.config.js 中修改 transpileDependencies 属性，对没有转换的依赖包单独进行转换配置，或者强制转换所有包

module.exports = {
  ...,
  transpileDependencies: ['vue-particles']
  // transpileDependencies: ['/.*/']
}

问题三

问题：IE 浏览器下 GET 请求的参数一样时会直接使用缓存数据
解决方法：
方法一、添加一个动态变化的参数，比如时间戳： t = new Date().getTime()
方法二、在请求头里设置两个属性，修改缓存策略

1 2	['Cache-Control'] = 'no-cache' ['Pragma'] = 'no-cache'