firebase - 在 Vue.js 中加载节点库
问题描述
首先,我正在使用 Vue 2 + Firebase 技术自学 Web Apps。对假人的解释将不胜感激。
我正在尝试在我的前端列出来自 Cloud Storage (Google Cloud Platform) 的存储桶。所以我找到了一个节点库来完成这个确切的任务。我创建了一个 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"
},
谢谢
解决方案
这个包@google-cloud/storage
适用于 Node.js 环境,这就是它在浏览器中不起作用的原因。在npm
存储库中,您几乎可以找到任何东西,但您确实需要知道它的目标平台是什么。阅读文档通常有助于了解您是否找到了正确的软件包。
为此,您需要一些 Node API 层,您将在其中使用@google-cloud/storage
,然后在您的 Vue 应用程序中使用该 API。
推荐阅读
- c# - 如何使用 DI 和服务模式在客户端应用程序中处理来自 api 的访问被拒绝或未经授权的响应
- sql - SQL 如何根据另一列的值标记给定的 sessionID
- java - 如何在java中使用REST API获取POST请求的请求体
- rest - 如何在颤动中制作无限滚动布局?(更新)
- vb.net - 过滤按钮winform执行事件问题
- python - 如何在缺少分隔符的熊猫中读取 csv(或 - 带有额外的分隔符)
- python - 在 Python 中从范围中查找 IP
- vb.net - 如何在 vb.net 中检查 URL 是 HTTP 还是 HTTPS
- python - 由于 YTArray 对象没有属性附加,如何在 for 循环中附加 YTArray?
- python - 我的界面没有使用 cx_freeze 显示我的日历