vue.js - 如何使用 vuetify 项目设置 vue-cli 以在 IE 11 上运行？

Question

我花了几天时间设置了一个 vue.js + vue-cli + typescript + vuetify 使用 IE 11 运行但没有成功的项目？

我在网上找到了很多帖子，解释了应该如何完成，但没有成功。我试图以几乎所有可能的方式组合下面解释的设置，但没有成功，最终导致许多不同的错误，直到空白页

该应用程序在 Chrome 或 FF 上运行良好

如果有人在 IE 11 中运行这样的应用程序，将不胜感激

语境 (所有最新版本):

vue-cli

typescript

vue.js + vue-router + vuex + vuex-persistedstate

vuetify + vue-i18n + vuelidate

axios

如果某些问题看起来很愚蠢，请原谅我，因为我是 babel/webpack 开发的新手。

我的尝试和问题 :
(我已经尝试了以下几乎所有的组合)

我应该使用 npm install babel-polyfill --save如 vuetify setup for IE 11 here 中所述?

我应该添加 import 'babel-polyfill'在 main.ts如 vuetify setup for IE 11 here 中所述?

或者我应该添加 import '@babel/polyfill'在 main.ts as explained here

我应该使用 npm install @babel/preset-env --save-dev如 vuetify setup for IE 11 here 中所述还是因为vue-cli而没有必要？正在使用？

在 babel.config.js , 我应该替换最初由 vue-cli 创建的内容吗

presets: [
    '@vue/app'
  ]

来自 as explained here

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

或(如在许多地方所见)？

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

或添加 2 个预设？

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

我应该添加一些插件，如 explained here ?

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

或者这样改as explained in the vue doc here ?

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

在 vue.config.js ，我应该添加吗？

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

[解决方案2019-06-25]
我们终于让它工作了，@blackening 的回答非常有帮助
还发生了我们在 IE 11 中使用 google "reCaptcha" 出现 javsacript 错误的情况。在以下设置后消失了:

作为先决条件， vue-cli已安装并通过选择“将 Babel 与 TypeScript 一起用于自动检测的 polyfill”来创建项目

1) 安装 core-js@3

    npm install core-js@3

2) 编辑 main.ts像这样:

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

3) 编辑 babel.config.js

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

就是这样!
现在我们正在与 IE 11 CSS 作斗争，但这是一个众所周知的故事......例如，在 vue 中仅将样式应用于 IE，只需像这样编码

    <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

我会做一个部分的回答。

1) @vue/app 和 babel 预设包含在 vue-cli 中。

https://cli.vuejs.org/guide/browser-compatibility.html#polyfills

这在 vue-cli 文档中有明确说明。但它还规定:

“如果您的依赖项之一需要 polyfill，您有几个选择:

如果依赖是在你的目标环境不支持的 ES 版本中编写的:添加 对 vue.config.js 中 transpileDependencies 选项的依赖 ”

2)你仍然需要在每个入口文件中放入babel polyfill。

传统上:import '@babel/polyfill'在你的 main.ts 中。

babel-preset-env 的作用是检测您的 浏览器列表然后用它认为必要的任何 polyfill 替换该行。

3) @babel/polyfill 已弃用。谁知道。

有些人需要额外的重型塑料填充物。这就是我。因为 office-js 中的互联网爆炸者 + 太习惯于前沿技术。这就是 core-js @ 3 的用武之地。

为此，我的 webpack 构建是完全自定义的。但是我把它从 vue-cli 中撕下来并从那里修改。

我的 babel 加载器配置:

const BABEL_LOADER = {
    loader: 'babel-loader',
    options: {
        plugins: ['@babel/plugin-syntax-dynamic-import'],
        presets: [
            // '@vue/app',
            ['@babel/preset-env', {
                targets: {
                    ie: '11',
                    browsers: 'last 2 versions',
                },
                useBuiltIns: 'usage',
                corejs: { version: 3, proposals: true },
            }],
        ],
    },
};

这是我的入口文件的顶部:

import Vue from 'vue';
import App from './App.vue';


// ------------ Polyfill ------------
import 'core-js/stable';

core-js 替换了 @babel/polyfill。

更多关于 core-js 的阅读: https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md