Vue基礎：IE11対応

Vue.jsではIE11はサポートされないですね。画面は真っ白になってしまう場合があります。

babel-polyfillというツールで対応できます。
ただし、古いブラウザ対応のため変換したコードは、長いし、速度も遅いようです。

いつかIE11のサポートは対象外になると幸せですね。

インストール

npm install babel-polyfill --save

babel.config.js

module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es6.promise',
        'es6.symbol'
      ]
    }]
  ]
}

import "babel/polyfill"

main.jsにてVueと同じ位置でimport

import Vue from 'vue'
import "@babel/polyfill";

fetchメソッド

IE11ではfetchメソッドがないからエラーになる場合があります。
その際には、whatwg-fetchを利用して回避できます。

1. インストール

npm install whatwg-fetch --save

2. App.vueに設定追加

import 'whatwg-fetch'

if (window.fetch === undefined) {
  window.fetch = fetch;
}

うまくいかない場合はIE11のコンソールのエラーを見てGoogle先生に聞きながら調整しましょう。

参考記事：https://cli.vuejs.org/guide/browser-compatibility.html#browserslist

以上