Vue-material在iPad4浏览器中出现Object.values is not a function错误求助

这个问题的核心很明确：iPad4上的Safari和Chrome（基于iOS WebKit内核）使用的是较老的JavaScript引擎，并不支持ES2017引入的Object.values方法，而vue-material 1.0 beta的代码中直接调用了这个方法，导致报错页面空白。你添加了polyfill但没生效，大概率是polyfill的加载顺序不对，或者没有正确转义第三方依赖的代码。

下面是具体的解决步骤：

1. 确保Polyfill在Vue和Vue-Material之前加载 #

Polyfill必须在用到Object.values的代码执行前注入到环境中，所以要把它放在项目入口的最顶部：

• 如果你的项目用的是Vue CLI 3+，推荐使用core-js来提供polyfill：
  在main.js的最开头添加：

  // 先导入polyfill
  import 'core-js/stable';
  import 'regenerator-runtime/runtime';
  
  // 再导入Vue和Vue-Material
  import Vue from 'vue';
  import VueMaterial from 'vue-material';
  import 'vue-material/dist/vue-material.min.css';
  
  Vue.use(VueMaterial);
  // ...其他代码
  

  同时在babel.config.js中配置：

  module.exports = {
    presets: [
      ['@vue/cli-plugin-babel/preset', {
        useBuiltIns: 'entry',
        corejs: 3 // 对应你安装的core-js版本，建议用3.x
      }]
    ]
  };
  

• 如果你想手动添加极简polyfill，可以在public/index.html中，所有引入Vue和Vue-Material的<script>标签之前添加：

  <script>
  // 手动实现Object.values的polyfill
  if (typeof Object.values !== 'function') {
    Object.values = function(obj) {
      return Object.keys(obj).map(function(key) {
        return obj[key];
      });
    };
  }
  </script>
  

2. 让Babel转义Vue-Material的代码 #

默认情况下，Vue CLI不会转义node_modules中的第三方包，而vue-material 1.0 beta的代码可能包含未转义的ES6+语法。你可以在vue.config.js中配置让Babel处理它：

module.exports = {
  transpileDependencies: ['vue-material']
};

这样Babel会把vue-material的代码转成兼容老浏览器的版本，从根源上避免这类语法兼容问题。

3. 验证修复效果 #

在iPad4的浏览器中打开页面后，打开开发者控制台（Safari需要在iPad的设置中开启Web检查器），输入Object.values并回车，如果返回一个函数，说明polyfill已经生效；此时再刷新页面，表单应该就能正常显示了。

内容的提问来源于stack exchange，提问作者ace