如何无需构建步骤将vuetable-2作为模块使用？运行报错求助

你遇到的错误是因为vuetable-2-full.js是为全局Vue环境设计的（UMD格式），它内部会尝试访问全局的Vue对象并挂载组件，但你用ES模块方式导入时，全局Vue对象未定义，导致代码无法给undefined的对象设置Vuetable属性。

方案1：使用全局脚本引入（最稳妥，无需构建步骤） #

先引入Vue 2的全局脚本，再引入vuetable-2，让vuetable能找到全局的Vue对象：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <!-- 先引入Vue 2全局脚本 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <!-- 再引入vuetable-2脚本 -->
  <script src="/vuetable-2-full.js"></script>
</head>
<body>
  <div id="app">
    <vuetable :fields="fields" :data="tableData"></vuetable>
  </div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          fields: ['name', 'email', 'phone'],
          tableData: [
            { name: 'John Doe', email: 'john@example.com', phone: '123-456-7890' },
            { name: 'Jane Smith', email: 'jane@example.com', phone: '098-765-4321' }
          ]
        }
      }
    })
  </script>
</body>
</html>

方案2：适配ES模块环境 #

如果一定要用ES模块导入，需要先把Vue挂载到全局window对象，再导入vuetable-2：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>
  <div id="app">
    <vuetable :fields="fields" :data="tableData"></vuetable>
  </div>
  <script type="module">
    // 导入Vue 2的ES模块版本
    import Vue from 'https://cdn.jsdelivr.net/npm/vue@2/dist/vue.esm.browser.js';
    // 将Vue挂载到全局，让vuetable能识别到
    window.Vue = Vue;
    // 导入vuetable-2
    await import('/vuetable-2-full.js');

    new Vue({
      el: '#app',
      data() {
        return {
          fields: ['name', 'email', 'phone'],
          tableData: [
            { name: 'John Doe', email: 'john@example.com', phone: '123-456-7890' },
            { name: 'Jane Smith', email: 'jane@example.com', phone: '098-765-4321' }
          ]
        }
      }
    })
  </script>
</body>
</html>

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