VueJs3+ Vuetify:不适用于IE和Edge

Question

我不知道我在这里做错了什么。我有VueJs3和Vuetify。Chrome和Firefox的工作原理很好，但是IE和Edge并没有加载。我正试图用Babel加载Poly座，并迫使Vue CLI为Vuetify提供transpile依赖关系。

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文件的顶部。我一直在用官方文件来设置这个。

我在这里错过了什么？

Answer 1

如果使用vue-cli创建项目，并使用vue add vuetify添加vuetify，那么使其在vue.config.js中工作的解决方案应该是将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',
    ]
}

回复有点晚，但我在其他地方找不到这个解决方案，这是我自己搜索时最先出现的帖子之一。所以我想我会在这里贴出对我有用的东西。

Answer 2

最后，我只是删除了Vuetify (我只使用了其中一个很容易替换的特性)和使用babel多填充cdn。也许不是最好的解决方案，但现在已经奏效了。