VueJs 3 + Vuetify：不能在 IE 和 Edge 中工作答案

【问题标题】：VueJs 3 + Vuetify: Not working in IE and EdgeVueJs 3 + Vuetify：不能在 IE 和 Edge 中工作
【发布时间】：2019-09-30 14:47:15
【问题描述】：

我不确定我在这里做错了什么。我有 VueJs 3 和 Vuetify。适用于 Chrome 和 Firefox，但无法在 IE 和 Edge 中加载。我正在尝试使用 Babel 加载 polyfill，并强制 Vue CLI 为 Vuetify 转换依赖项。

package.json

"babel": {
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}

vue.config.js

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

main.ts

import 'core-js/es6';
import 'regenerator-runtime/runtime';

导入包含在我的 main.ts 文件的顶部。我一直在使用官方文档进行设置。

我在这里错过了什么？

【问题讨论】：

什么不起作用？你有错误吗？我看到您决定只删除 Vuetify，但这并不能解决您或其他没有此功能的人的问题。
我不记得确切，因为这是很久以前的事了，但我相信我收到了某种控制台错误，这让我知道 Vuetify 导致了这个问题。我确实记得该应用程序根本不会在 IE/Edge 中加载，并且 Vue 没有被执行。它只是呈现的默认 index.html 文件。

标签： vue.js babeljs vuetify.js polyfills

【解决方案1】：

如果您使用 vue-cli 创建项目并使用 vue add vuetify 添加 vuetify，则使其在 Edge 中工作的解决方案应该是将 transpileDependencies: ['vuetify'] 添加到 vue.config.js 文件中。

但在我的例子中，我将 vue/vuetify 添加到了一个已经存在的项目中，并且没有使用 vue-cli。所以为了让它工作，我安装了 core-js npm install core-js@2 --save 并将它添加到我的 webpack.config.js 的规则中

{
    test: /\.js$/,
    exclude: /node_modules\\(?!(vuetify)).*/,
    use: [
        {
            loader: 'babel-loader',
            options: {
                configFile: './babel.config.js',
            }
        }
    ]
}

然后我将 babel.config.js 文件添加到项目的根目录中。

module.exports = {
    presets: [
        ['@babel/preset-env', {
            debug: true,
            useBuiltIns: 'usage',
            corejs: { "version": 2, "proposals": true }
        }],
    ],
    plugins: [
        '@babel/plugin-proposal-object-rest-spread',
        '@babel/plugin-transform-spread',
    ]
}

回复有点晚，但我在其他任何地方都找不到此解决方案，这是我自己搜索时出现的第一批帖子之一。所以我想我会在这里发布对我有用的东西。

【讨论】：

太棒了！感谢您的解决方案。是的，这正是我所做的。我将 Vuetify 添加到一个已经存在的项目中。下雨天我得试试这个。

【解决方案2】：

我最终只是删除了 Vuetify（我只使用了其中一个很容易替换的功能）并使用了 babel polyfill cdn。可能不是最好的解决方案，但现在可以使用。

【讨论】：