Vuetify.js-IE11不显示带有babel-polyfill的数据表

Question

我已经在laravel环境中使用package.json（npm）安装了babel-polyfill。 我正在使用vuetify生成表。但是，当在IE11中打开呈现表格的页面时，表格会显示出来，但所有列都消失了（所有列都合并为一个列），并且我无法与数据表进行交互（我有行点击事件在Chrome中可以正常运行， Firefox和Edge）。我需要其他的polyfill包装吗？

Package.json：

    "devDependencies": {
     ...
    "babel-polyfill": "^6.26.0",
     ...
   }

app.js：

import babelPolyfill from 'babel-polyfill';
import Vuetify from 'vuetify'


window.Vue = require('vue');    
Vue.use(vueResource);
Vue.use(Vuetify);

感谢您的帮助！

编辑：原来是一个错误。它似乎已在1.5.5版中修复。

Answer 1

如Zach所述，几乎没有对E11的支持。 Polyfill support is there，但缺少CSS支持。

如果您查看浏览器统计信息，则只有少数人仍在使用它。 如果可以的话，应该放弃支持。

将新技术与非常老的程序结合使用往往会引起问题。

Answer 2

用于新项目（使用Vue CLI v3）

npm install @vue/cli -g

vue create my-app

vue add vuetify

对于现有应用程序：

npm install vuetify --save

如下更新main.js：

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

您可能还想添加默认样式：

// index.js or main.js
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader

OR

// main.styl
@import '~vuetify/src/stylus/main' // Ensure you are using stylus-loader

IE 11和Safari 9支持：

npm install babel-polyfill --save

然后您必须按以下方式更新main.js：

// my-project/src/index.js
import 'babel-polyfill'
...
new Vue()

如果您的项目尚未包含Babel预设环境，则应按以下步骤添加它：

npm install @babel/preset-env --save-dev

并更新.babelrc

// .babelrc
{
  "presets": ["@babel/preset-env"]
}

重要步骤：

Vue Cli v3不会自动引入IE11支持，因此您必须通过手动在transpileDependencies中添加vue.config.js参数来对其进行手动配置

// vue.config.js

module.exports = {
  transpileDependencies:[/node_modules[/\\\\]vuetify[/\\\\]/]
}

就是这样，它应该可以工作。享受：）

结果：

Answer 3

可能您在Vuetify主题选项中将customProperties设置为true。它使用IE 11中未实现的css-vars，因此未显示颜色。将customProperties设置为false对我来说解决了类似的问题。