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

Question

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

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

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

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

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

• 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 中的说明添加import 'babel-polyfill'inmain.ts吗？
• 或者我应该加import '@babel/polyfill'inmain.tsas explained here
• 我应该按照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 中使用 google"reCaptcha" 的 javsacript 错误，在以下设置后消失了：

作为先决条件，安装vue-cli并通过选择`'Use Babel and 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

npm install --save core-js

main.js 的前两行：

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

在 vue.config.js 中：

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

Answer 3

根据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，最终代码如下：

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 中运行良好。