首先，我正在使用Vue 2 + Firebase技术自己学习Web Apps。对假人的解释将不胜感激。
我正在尝试在我的前端列出来自云存储(谷歌云平台(的存储桶。所以我找到了一个节点库来完成这个确切的任务。我创建了一个 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 组件中使用这种库，或者我需要有一个节点.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。