Comment configurer un projet vue-cli avec vuetify pour fonctionner avec IE 11?

Question

Je passe quelques jours à configurer un vue.js + vue-cli + TypeScript + vuetify pour fonctionner avec IE = 11 sans succès?

J'ai trouvé de nombreux messages sur le net qui expliquent comment cela doit être fait mais sans succès. J'ai essayé de combiner de toutes les manières possibles la configuration expliquée ci-dessous sans succès, avec de nombreuses erreurs différentes jusqu'à une page vierge

L'application fonctionne correctement avec Chrome ou FF

Si quelqu'un a une telle application exécutée en IE 11, il serait grandement apprécié

Contexte (toutes les dernières versions):

• vue-cli
• Manuscrit
• vue.js + vue-router + vuex + vuex-persistedstate
• vuetify + vue-i18n + vuelidate
• axios

Excusez-moi si une question semble stupide, car je suis un débutant sur le développement babel/webpack.

Ce que j'ai essayé et questions : (j'ai essayé presque toutes les combinaisons suivantes)

• Dois-je utiliser npm install babel-polyfill --savecomme expliqué dans le configuration vuetify pour IE 11 ici ?
• Dois-je ajouterimport 'babel-polyfill'dansmain.tscomme expliqué dans le configuration vuetify pour IE 11 ici ?
• Ou devrais-je ajouterimport '@babel/polyfill'dansmain.tscomme expliqué ici
• Dois-je utiliser npm install @babel/preset-env --save-devcomme expliqué dans le configuration vuetify pour IE 11 ici ou est-ce inutile à cause devue-cli utilisé?

• dansbabel.config.js, dois-je remplacer le contenu initialement créé par vue-cli

  presets: [
      '@vue/app'
    ]
  

  par comme expliqué ici

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

  ou (comme on le voit dans de nombreux endroits)?

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

  ou ajouter les 2 presets?

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

  Dois-je ajouter des plugins comme expliqué ici ?

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

  Ou changez-le comme ceci comme expliqué dans le document vue ici ?

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

• dansvue.config.js, dois-je ajouter?

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

[SOLUTION 2019-06-25]
Nous l'avons finalement fait fonctionner, la réponse de @blackening a été très utile. Il s'est également produit que nous avions des erreurs javsacript dans IE 11 avec google"reCaptcha"qui a disparu après la configuration suivante:

Comme condition préalable, vue-cli est installé et le projet est créé en sélectionnant `` Utiliser Babel avec TypeScript pour les polyfills détectés automatiquement ''

1) installcore-js@3

    npm install core-js@3

2) modifiermain.tscomme ça:

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

3) modifierbabel.config.js

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

Et c'est tout !
Maintenant, nous nous battons avec IE 11 CSS, mais c'est une histoire connue ... Par exemple, dans vue pour appliquer un style uniquement à IE, juste coder comme ça

    <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>

Answer 1

npm install --save core-js

Les deux premières lignes de main.js:

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

Dans vue.config.js:

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