Vue 兼容 IE9（含） +

本篇文章于 2019-07-16 初次写在我的个人小站，链接：liuxianyu.cn/article/vue…

  最近有个项目在 IE9 中白屏，整理一下相关的资料。

1、transpileDependencies

  如果项目中使用了第三个组件，请在 vue.config.js 中添加：

module.exports = {
  // 如下正则代表当前 node_modules/zzp-ui 下的所有文件【如果是 ['zzp-ui'] 则只有引用的一个文件生效】
  transpileDependencies: [/zzp-ui/]
}

2、浏览器内核

  建议在 public/index.html head 中添加：

<meta name="renderer" content="webkit|ie-comp|ie-stand">

• 首先强制浏览器使用 webkit 内核（极速内核）
• 如果浏览器没有 webkit 内核，则按照用户浏览器所支持的最新 IE 版本的 trident 内核渲染页面（IE 兼容内核）
• 否则按照当前浏览器的标准内核渲染（IE 标准内核）

3、IE9 跨域

  IE9 默认不支持跨域访问，如果项目使用到跨域且需要兼容 IE9, 可以配置 nginx 等转发网络请求

  本地开发如在 IE9 下测试解决跨域可临时使用 proxy，在vue.config.js中配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.douban.com',
        ws: true,
        changeOrigin: true
      }
    },
  },
  transpileDependencies: [/zzp-ui/]
}