Vue.js 中的 googleapis：TypeError：“原始”参数必须是函数类型答案

【问题标题】：googleapis in Vue.js: TypeError: The "original" argument must be of type FunctionVue.js 中的 googleapis：TypeError：“原始”参数必须是函数类型
【发布时间】：2019-12-23 16:28:06
【问题描述】：

我正在尝试使用 googleapis 为 Vue 项目在 Google 电子表格中获取一些行，并且我已经在 Google 控制台中创建了一个项目和正确的服务帐户凭据。问题是当我单击按钮时出现此错误：TypeError: The "original" argument must be of type Function 但我使用的是这个简单的代码：

<template>
  <div id="app" class="container">
    <button class="button" @click="getData">Get data</button>
  </div>
</template>

<script>
export default {
  name: 'app',

  methods: {
    getData: async function() {
      const { google } = require('googleapis');
      const range = 'Data!A2:C999';
    }
  }
}
</script>

我无法理解导致此错误的原因，const { google } = require('googleapis'); 似乎有问题，但我无法弄清楚。

【问题讨论】：

标签： javascript vue.js google-sheets google-api

【解决方案1】：

const { google } = require('googleapis'); 的语法不正确。

您应该添加：

import { google } from 'googleapis';

在script标签的开头

【讨论】：

谢谢，但它没有解决问题：未捕获的类型错误：“原始”参数必须是函数类型
如果您不尝试导入googleapis，错误就会消失？
在这里工作得非常好：codesandbox.io/s/heuristic-bartik-zqqmx
是的，如果我不导入 googleapis，错误就会消失，但即使我按照您的描述导入它，错误似乎仍然存在
你已经正确安装了依赖？

【解决方案2】：

我遇到了同样的问题，在应用解决方法here 后，问题就解决了。

在浏览器上运行 readFile() 似乎有问题。

你需要做的是像这样编辑你的 webpack.config.js 文件

module.exports = {
resolve: {
    extensions: ['.js'],
    alias: {
        fs: path.resolve(__dirname, 'src/mock-fs.js')
    }
  }
};

如果您使用的是 Vue CLI 3，那么您需要在根级别创建一个 vue.config.js 文件，因为创建项目时没有创建 webpack.config.js 文件（它是在运行时创建的) 并像这样修改它(more info)

module.exports = {
configureWebpack: {
    resolve: {
        extensions: ['.js'],
        alias: {
            fs: path.resolve(__dirname, 'src/mock-fs.js')
        }
    }
  }
}

mock-fs.js 在哪里

module.exports = {
readFile () {}
}

【讨论】：