如何使用 IE 11 将带有 vuetify 项目的 vue-cli 设置为运行？

Question

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

我在网上找了很多帖子解释应该怎么做，但都没有成功。我尝试以几乎所有可能的方式组合下面解释的设置但没有成功，以许多不同的错误结束，直到出现空白页

应用程序运行机智 Chrome 或 FF

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

上下文（所有最新版本）：

vue-cli
打字稿
vue.js + vue-router + vuex + vuex-persistedstate
vuetify + vue-i18n + vuelidate
axios

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

我的尝试和问题：（我几乎尝试了以下所有组合）

我应该按照 vuetify setup for IE 11 here 中的说明使用 npm install babel-polyfill --save 吗？
我是否应该按照 vuetify setup for IE 11 here 中的说明在 main.ts 中添加 import 'babel-polyfill'？
或者我应该在main.tsas explained here

import '@babel/polyfill'

我应该按照 vuetify setup for IE 11 here 中的说明使用 npm install @babel/preset-env --save-dev 还是因为使用了 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 中有 javsacript 错误 google"reCaptcha"，在以下设置后消失了：

作为先决条件，安装vue-cli并通过选择`'Use Babel alongside TypeScript for auto-detected polyfills'

创建项目

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 的作用是检测您的 browserlist 然后用它认为必要的任何 polyfill 替换该行。

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

有些人需要额外的重型 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

Answer 2

根据this tutorial，使用以下命令安装 vuetify 后：

npm install vuetify --save

然后，在 main.ts 文件中导入 Vuetify，如下所示：

import Vue from 'vue';
import App from './App.vue';
import store from './store';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);
Vue.config.productionTip = false;

之后，使用这个命令安装babel-polyfill:

npm install --save babel-polyfill

然后，在main.ts文件的顶部添加导入，最终代码如下：

import 'babel-polyfill';
import Vue from 'vue';
import App from './App.vue';
import store from './store';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);
Vue.config.productionTip = false;

new Vue({
  store,
  render: (h) => h(App),
}).$mount('#app');

最后，使用 "npm run serve" 命令运行应用程序，它在 IE 11 中运行良好。

Answer 3

npm install --save core-js

main.js 的前两行：

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

在vue.config.js中：

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

如何使用 IE 11 将带有 vuetify 项目的 vue-cli 设置为运行？

How to setup a vue-cli with vuetify project to run with IE 11?

internet-explorer-11

vue.js

vuetify.js

vue-cli-3

如何使用 IE 11 将带有 vuetify 项目的 vue-cli 设置为 运行？

How to setup a vue-cli with vuetify project to run with IE 11?

internet-explorer-11

vue.js

vuetify.js

vue-cli-3

如何使用 IE 11 将带有 vuetify 项目的 vue-cli 设置为运行？