Question

我花了几天时间设置 vue.js + vue-cli +打字稿+ vuetify 项目，使其无法与IE 11一起运行？

我在网上发现了很多帖子，这些帖子解释了应该怎么做但没有成功。我试图以几乎所有可能的方式组合下面说明的设置，但均未成功，endind出现许多不同的错误，直到空白页

该应用程序可以在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'中添加main.ts？
还是应该在import '@babel/polyfill' as explained here 中添加main.ts
我应该使用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' }]]

还是添加两个预设？

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的回答非常有帮助还发生了我们在google "reCaptcha"中的IE 11中出现javsacript错误，该错误在以下设置后消失了：

先决条件是安装vue-cli，并选择“在TypeScript旁使用Babel进行自动检测的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作斗争，但这是一个众所周知的故事……作为一个nexample，在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文档中有明确说明。但它也指定：

“如果您的依赖项之一需要填充，您可以选择以下几种方式：

如果依赖性是在目标环境不支持的ES版本中编写的：将该依赖性添加到vue.config.js的transpileDependencies选项中“

2）您仍然需要将babel polyfill放入每个条目文件中。

传统上：在您的main.ts中为import '@babel/polyfill'。

babel-preset-env的作用是检测到您的浏览器列表，然后将其替换为所需的任何polyfill。

3）@ babel / polyfill已过时。谁知道。

有些人需要额外的重型填充料。那是我。因为office-js +中的Internet爆炸程序太习惯了尖端技术。那就是core-js @ 3出现的地方。

我的webpack构建是完全自定义的。但是我将其从vue-cli中剥离并从那里进行了修改。

我的babel loader配置：

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

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

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

如何通过vuetify项目设置vue-cli以与IE 11一起运行？

3 个答案: