vue + vue-cli3 + typescriptをie11対応する

• プロジェクトの作成 vue createで作成されたプロジェクトが対象。 TypeScriptも設定しておく。

vue create vue-ts-example

• es5で出力 es2017のライブラリとかを読み込んでおく

tsconfig.json

    "compilerOptions": {

      "target": "es5",
      "lib": [ "es2017", "dom"],
      ...

• promiseとか使う場合は、polyfillsの設定が必要

babel.config.js

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

• babel-polyfillを出力する

vue.config.js

module.exports = {
    configureWebpack: (config) => {
      config.entry = ["babel-polyfill", "./src/main.ts"]
    },
    // node_modules以下にIE11非対応のライブラリがある場合、それもtranspileの対象とする
    transpileDependencies: ["vue-context"],
  }

• main.tsでbabel-polyfillをimportする

main.ts

import 'babel-polyfill';