在 Vue.js 中加载节点库

Posted 2023-02-22

【中文标题】在 Vue.js 中加载节点库

【英文标题】：Loading node libraries in Vue.js

【发布时间】：2020-05-21 09:39:16

【问题描述】：

首先，我正在使用 Vue 2 + Firebase 技术自学 Web Apps。对假人的解释将不胜感激。

我正在尝试在我的前端列出来自 Cloud Storage (Google Cloud Platform) 的存储桶。所以我找到了一个节点library 来完成这个确切的任务。我创建了一个 Vue 组件来列出存储桶，但是当我尝试将节点库导入组件时（在脚本标签内）

import storage from '@google-cloud/storage'

我收到此错误：

 ERROR  Failed to compile with 1 errors                                                         13:34:51
 error  in ./node_modules/configstore/index.js

Module parse failed: Unexpected token (26:4)
You may need an appropriate loader to handle this file type.
|               if (defaults) 
|                       this.all = 
|                               ...defaults,
|                               ...this.all
|                       ;

 @ ./node_modules/gcs-resumable-upload/build/src/index.js 19:20-42
 @ ./node_modules/@google-cloud/storage/build/src/file.js
 @ ./node_modules/@google-cloud/storage/build/src/index.js
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/Bucket.vue
 @ ./src/components/Bucket.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

我什至不知道是否可以在 Vue 组件中使用这种库，或者我需要一个 node.js 后端环境。在继续组件开发之前，我想知道是否可以在组件中使用节点库，因为我对此很迷茫。

这是我的依赖版本以备不时之需：

"dependencies": 
    "@google-cloud/storage": "^4.3.0",
    "axios": "^0.19.2",
    "firebase": "^7.8.0",
    "googleapis": "^47.0.0",
    "vue": "^2.5.2",
    "vue-firestore": "^0.3.30",
    "vue-router": "^3.0.1",
    "vuetify": "^2.2.8"
  ,
  "devDependencies": 
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  ,
  "engines": 
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  ,

谢谢

【参考方案1】：

这个包@google-cloud/storage 适用于 Node.js 环境，这就是它在浏览器中不起作用的原因。在npm 存储库上，您几乎可以找到任何东西，但您确实需要知道它的目标平台是什么。阅读文档通常有助于了解您是否找到了正确的软件包。

为此，您需要一些 Node API 层，您将在其中使用 @google-cloud/storage，然后在您的 Vue 应用程序中使用该 API。

【讨论】：

我明白了。我没有启动节点后端层的知识，因此我将继续寻找一种解决方案来列出没有该库的存储桶。