web-dev-qa-db-ja.com

IE 11で実行するようにvuetifyプロジェクトでvue-cliを設定する方法は?

vue.js + vue-cli + TypeScript + vuetifyプロジェクトをIE 11で実行するために数日かけてセットアップしましたが、成功しませんか?

私はそれをどのようにすべきかを説明しているが成功しなかった多くの投稿をネット上で見つけました。私は以下で説明する設定をほぼすべての方法で組み合わせようとしましたが、成功せず、空白ページまで多くの異なるエラーで終わっていました

アプリケーションは正常に動作しますChromeまたはFF

誰かがそのようなアプリケーションをIE 11で実行している場合、それは大歓迎です

Context(すべての最新バージョン):

  • vue-cli
  • TypeScript
  • vue.js + vue-router + vuex + vuex-persistedstate
  • vuetify + vue-i18n + vuelidate
  • アクシオス

私がbabel/webpack devの初心者なので、質問が愚かであるとしたら、ご容赦ください。

私が試したことと質問:(私は以下のほとんどすべての組み合わせを試しました)

  • vuetify setup for IE 11 here で説明されているnpm install babel-polyfill --saveを使用する必要がありますか?
  • vuetify setup for IE 11 here で説明されているように、import 'babel-polyfill'inmain.tsを追加する必要がありますか?
  • または、追加する必要がありますimport '@babel/polyfill'inmain.tsここで説明
  • vuetify setup for IE 11 here で説明されているnpm install @babel/preset-env --save-devを使用する必要がありますか、それともvue-cliが使用されているため不要ですか?
  • inbabel.config.js、vue-cliによって最初に作成されたコンテンツを置き換える必要がありますか

    presets: [
        '@vue/app'
      ]
    

    ここで説明したように

    presets: ['@babel/preset-env']
    

    または(多くの場所で見られるように)?

    presets: [['@vue/app', useBuiltIns: 'entry' }]]
    

    または2つのプリセットを追加しますか?

    presets: [
      ['@babel/preset-env'],
      ['@vue/app', useBuiltIns: 'entry' }]
    ]
    

    ここで説明 のようなプラグインを追加する必要がありますか?

    presets: ['@vue/app'],
    plugins: ['@babel/transform-modules-commonjs']
    

    または、次のように変更します vueドキュメントの説明

    presets: [
      ['@vue/app', {
      polyfills: [
       'es6.promise',
       'es6.symbol'
      ]
      }]
     ]
    
  • invue.config.js、追加しますか?

    transpileDependencies: [
      'vuetify',
      'vue-i18n',
      'vuelidate',
      'axios'
    ]
    

[SOLUTION 2019-06-25]
ようやく動作しました。@ blackeningからの回答は非常に役に立ちました。また、IE 11でgoogle"reCaptcha"のjavsacriptエラーが発生し、次のセットアップ後に消えました。

前提条件として、vue-cliがインストールされており、プロジェクトは['自動検出されたポリフィルにTypeScriptと一緒にバベルを使用する]を選択して作成されます。

1)installcore-js@3

    npm install core-js@3

2)editmain.tslike this:

    import 'core-js/stable'
    import Vue from 'vue'
    import '@/plugins/vuetify'
    {...}

3)editbabel.config.js

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

以上です !
今、IE 11 CSSと戦っていますが、それは既知の話です...例として、IEにのみスタイルを適用するinvueは、次のようにコーディングしてください

    <style scoped>
      /* Only for  IE 11, wrap div text */
      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        .ieMaxWidth90 {
          max-width: 90vw; /* 90% view width */
        }
      }
    </style>
6
titou10
npm install --save core-js

Main.jsの上の2行:

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

Vue.config.jsで:

 module.exports = {
    ...,
    transpileDependencies: ['vuetify']
 }
1
Dalcof