错误：无法解析“child_process”和错误：无法解析“fs”

Question

我正在尝试使用google-spreadsheet库将数据从 google 电子表格获取到我的 Vue 应用程序。 但我收到以下错误

 error  in ./node_modules/google-auth-library/build/src/auth/googleauth.js

Module not found: Error: Can't resolve 'child_process' in 'C:\Users\user\Desktop\Internship\Draft1\draft1\node_modules\google-auth-library\build\src\auth'

 error  in ./node_modules/google-auth-library/build/src/auth/googleauth.js

Module not found: Error: Can't resolve 'fs' in 'C:\Users\user\Desktop\Internship\Draft1\draft1\node_modules\google-auth-library\build\src\auth'

 error  in ./node_modules/google-p12-pem/build/src/index.js

Module not found: Error: Can't resolve 'fs' in 'C:\Users\user\Desktop\Internship\Draft1\draft1\node_modules\google-p12-pem\build\src'

 error  in ./node_modules/gtoken/build/src/index.js

Module not found: Error: Can't resolve 'fs' in 'C:\Users\user\Desktop\Internship\Draft1\draft1\node_modules\gtoken\build\src'

ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js 22:24-48
Module not found: Error: Can't resolve 'child_process' in 'C:\Users\user\Desktop\Internship\Draft1\draft1\node_modules\google-auth-library\build\src\auth'
 @ ./node_modules/google-auth-library/build/src/index.js 20:21-49
 @ ./node_modules/google-spreadsheet/lib/GoogleSpreadsheet.js 9:4-34
 @ ./node_modules/google-spreadsheet/index.js 1:26-60
 @ ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/HomeView.vue?vue&type=script&lang=ts 5:0-50 46:22-38
 @ ./src/views/HomeView.vue?vue&type=script&lang=ts 1:0-238 1:0-238 1:239-466 1:239-466
 @ ./src/views/HomeView.vue 2:0-59 3:0-54 3:0-54 8:49-55
 @ ./src/router/index.ts 2:0-45 6:13-21
 @ ./src/main.ts 3:0-30 17:8-14

ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js 24:11-24
Module not found: Error: Can't resolve 'fs' in 'C:\Users\user\Desktop\Internship\Draft1\draft1\node_modules\google-auth-library\build\src\auth'
 @ ./node_modules/google-auth-library/build/src/index.js 20:21-49
 @ ./node_modules/google-spreadsheet/lib/GoogleSpreadsheet.js 9:4-34
 @ ./node_modules/google-spreadsheet/index.js 1:26-60
 @ ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/HomeView.vue?vue&type=script&lang=ts 5:0-50 46:22-38
 @ ./src/views/HomeView.vue?vue&type=script&lang=ts 1:0-238 1:0-238 1:239-466 1:239-466
 @ ./src/views/HomeView.vue 2:0-59 3:0-54 3:0-54 8:49-55
 @ ./src/router/index.ts 2:0-45 6:13-21
 @ ./src/main.ts 3:0-30 17:8-14

ERROR in ./node_modules/google-p12-pem/build/src/index.js 16:11-24
Module not found: Error: Can't resolve 'fs' in 'C:\Users\user\Desktop\Internship\Draft1\draft1\node_modules\google-p12-pem\build\src'
 @ ./node_modules/gtoken/build/src/index.js 168:57-82
 @ ./node_modules/google-auth-library/build/src/auth/jwtclient.js 22:17-34
 @ ./node_modules/google-auth-library/build/src/index.js 74:18-45
 @ ./node_modules/google-spreadsheet/lib/GoogleSpreadsheet.js 9:4-34
 @ ./node_modules/google-spreadsheet/index.js 1:26-60
 @ ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/HomeView.vue?vue&type=script&lang=ts 5:0-50 46:22-38
 @ ./src/views/HomeView.vue?vue&type=script&lang=ts 1:0-238 1:0-238 1:239-466 1:239-466
 @ ./src/views/HomeView.vue 2:0-59 3:0-54 3:0-54 8:49-55
 @ ./src/router/index.ts 2:0-45 6:13-21
 @ ./src/main.ts 3:0-30 17:8-14

ERROR in ./node_modules/gtoken/build/src/index.js 16:11-24
Module not found: Error: Can't resolve 'fs' in 'C:\Users\user\Desktop\Internship\Draft1\draft1\node_modules\gtoken\build\src'
 @ ./node_modules/google-auth-library/build/src/auth/jwtclient.js 22:17-34
 @ ./node_modules/google-auth-library/build/src/index.js 74:18-45
 @ ./node_modules/google-spreadsheet/lib/GoogleSpreadsheet.js 9:4-34
 @ ./node_modules/google-spreadsheet/index.js 1:26-60
 @ ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/HomeView.vue?vue&type=script&lang=ts 5:0-50 46:22-38
 @ ./src/views/HomeView.vue?vue&type=script&lang=ts 1:0-238 1:0-238 1:239-466 1:239-466
 @ ./src/views/HomeView.vue 2:0-59 3:0-54 3:0-54 8:49-55
 @ ./src/router/index.ts 2:0-45 6:13-21
 @ ./src/main.ts 3:0-30 17:8-14

webpack compiled with 4 errors

我已经尝试了几乎所有可以在网上找到的解决方案（比如这个问题），但我仍然收到这个错误。 我的 package.json 是

{
  "name": "draft1",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "assert": "^2.0.0",
    "axios": "^0.27.2",
    "child_process": "^1.0.2",
    "core-js": "^3.8.3",
    "crypto-browserify": "^3.12.0",
    "el-table-draggable": "^1.4.12",
    "element-plus": "^2.2.2",
    "fs": "0.0.1-security",
    "google-spreadsheet": "^3.3.0",
    "https": "^1.0.0",
    "lodash": "^4.17.21",
    "net": "^1.0.2",
    "node-polyfill-webpack-plugin": "^2.0.0",
    "node-sass": "^7.0.1",
    "os-browserify": "^0.3.0",
    "path-browserify": "^1.0.1",
    "pouchdb": "^7.3.0",
    "primeicons": "^5.0.0",
    "primevue": "^3.12.6",
    "querystring-es3": "^0.2.1",
    "sass-loader": "^13.0.0",
    "stream-browserify": "^3.0.0",
    "tls": "0.0.1",
    "url": "^0.11.0",
    "util": "^0.12.4",
    "v-network-graph": "^0.5.17",
    "vue": "^3.2.13",
    "vue-class-component": "^8.0.0-0",
    "vue-good-table": "^2.21.11",
    "vue-gsheets": "^4.0.3",
    "vue-resizer": "^1.1.9",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.12.3",
    "@types/pouchdb": "^6.4.0",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "typescript": "~4.5.5"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "@vue/typescript/recommended"
    ],
    "parserOptions": {
      "ecmaVersion": 2020
    },
    "rules": {
      "vue/no-deprecated-slot-attribute": "off"
    }
  },
  "browser": {
    "fs": false,
    "child_process": false
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

我也试过

const { defineConfig } = require('@vue/cli-service')
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    devtool: 'source-map',
    plugins: [
      new NodePolyfillPlugin()
    ]
  }
})

但这也不起作用。

我尝试使用google-spreadsheets的主要代码是（我试图按照本教程

<template>
<button @click="handlesheets">GOOGLE SHEETS</button>
</template>
<script lang='ts'>
import GoogleSpreadsheet from "google-spreadsheet"
export default defineComponent({
  name: 'HomeView',
  props: [],
  data(){
    return{
      
    };
  },
  components: {
    GraphComp,
    TableComp
  },
  methods: {  
    handlesheet(){
        const doc = new GoogleSpreadsheet('1*****')
        //await promisify(doc.useServiceAccountAuth)(creds)
        //const info = await promisify(doc.getInfo)()
        //const sheets = info.worksheets[0]
        //console.log(sheets.title)

    }

我是 Javascript 和 vue 的新手，所以如果有人可以让我知道我的错误或指出解决方案的方向，我将不胜感激。

Answer 1

AFAIK google-spreadsheets 是一个node包，它依赖于节点特定的库，如fs

从您提供的错误消息以及您尝试将此包与Vue一起使用的事实推断，我相信您正在尝试直接在浏览器中使用 google-spreadsheets。

我不完全确定您的用例是什么，但是，如果您打算使用这个包，我建议您制作一个单独的节点项目来玩，并可能使用该节点项目将数据发送到您的 vue 项目。