vue-cli v3 与 node.js firebase 函数，firebase 托管（错误：在函数源目录中找不到 npm 包）

Posted 2023-02-22

【中文标题】vue-cli v3 与 node.js firebase 函数，firebase 托管（错误：在函数源目录中找不到 npm 包）

【英文标题】：vue-cli v3 with node.js firebase functions, firebase hosting (Error: No npm package found in functions source directory)

【发布时间】：2019-01-31 03:02:19

【问题描述】：

我想将 Vue.js 用于前端和 Firebase 函数 (Express.js) + Firestore 用于后端。

0-step：我在 Google Firebase 上创建了一个新项目，我创建了一个具有所有者权限的新服务帐户（稍后与 Admin SDK 一起使用）

第一步：我安装了 vue-cli v3 并创建了项目：

$ vue create my-project
$ npm run serve //localhost:8080 OK

第二步：

$npm install firebase firebase-admin firebase-functions --save

文件夹结构：

my-project
  .firebaserc //created (edited) manually
  babel.config.js
  firebase.json //created (edited) manually
  package.json
  dist
  node_modules
  public
  src
    assets
    components
    firebase
      functions
        index.js //here are my functions
      service-accounts
    views

firebase.json：（从其他项目复制并手动编辑）

  "functions:": 
    "source": "src/firebase/functions"
  ,
  "hosting": 
    "public": "public",
    "ignore": [...]
  

src/functions/index.js：

import functions from 'firebase-functions';
import admin from 'firebase-admin';

const serviceAccount = require('../service-accounts/owner-key.json');
admin.initializeApp(
  credentials: admin.credencial.cert(serviceAccount),
  databaseURL: 'my-project.firebaseio.com'
)
const db = admin.firestore();
...

在 package.json 文件中我添加了额外的脚本：

"deploy": "vue-cli-service build && firebase deploy --only hosting,functions"

但是当我运行“npm run deploy”命令时，我收到一个错误：

在函数源目录中找不到 npm 包。请在 src/firebase/functions 中运行“npm init”

我的问题是下一个：为什么它只需要在函数源目录中安装 firebase 函数包，我可以使用我安装在*** node_modules 文件夹中的 firebase-functions 吗？

【参考方案1】：

我找到了对此类错误的解释： Github: firebase.json option "functions.source"...

firebase-tools 在进行函数模拟或部署时只查看函数文件夹。这是一个经过深思熟虑的设计选择，在部署目标（函数、托管等）之间进行隔离。在部署函数时，整个函数文件夹被压缩（忽略 node_modules）并部署。部署后，服务器通过查看 package.json 中的内容并从 npm 中提取依赖项来“构建”项目。未部署项目根目录。因此，模拟器仅通过查看函数文件夹来模拟部署行为。

firebase.json 项目根文件夹中的文件：

  "functions:": 
    "source": "src/functions"
  ,
  "hosting": 
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  

并且在根项目文件夹的主 package.json 中我添加了一行：

"scripts": 
  "postinstall": "cd src/functions && npm install"
,

毕竟我进入了 /src/functions 文件夹并安装了 Express.js：

cd src/functions && npm install express --save

【讨论】：

我面临着类似的问题。你能看看这个***.com/questions/56523054/…

【参考方案2】：

我建议您将这两个项目分开，特别是不要将 Firebase Cloud Functions 目录放在 vue.js 项目文件夹中。

换句话说：

1/ 使用 vue.js CLI 将您的 vue.js 项目创建为“独立”的 vue.js 前端项目

2/ 像往常一样通过 Firebase CLI 在完全不同的位置创建您的 Firebase 项目。

3/ 当你想部署你的 vue.js 前端应用时，构建你的 vue.js 应用并将 dist 文件夹的内容复制到 Firebase 项目的 public 文件夹中

4/ 使用 firebase deploy --only hosting,functions（或 firebase deploy --only functions 或 firebase deploy --only hosting...）部署 Firebase 项目

您可以在步骤 3 中自动复制。

【讨论】：

对不起，稍后这个项目将上传到我们的bitbucket上，其他人将使用它来开发自己的版本（具有其他功能），并且只使用$ npm install命令会很棒。 . 还有，下一个想法 - 创建我们自己的 API，我想用它来异步下载 vue 单文件组件（作为静态文件）

我明白了。有兴趣知道如何“混合”这两个 CLI，并想知道是否有人有解决方案。

@RenaudTarnec 我遇到了类似的问题。你能看看这个吗？ ***.com/questions/56516147/…

@PvDev 您的具体问题是什么？不清楚。您可以创建一个包含所有详细信息的新问题。

实际上我有客户端和服务器两部分。客户端使用 vuejs 完成，服务器使用 nodejs 完成。我在firebase托管中托管。在服务器-> app.js中，我一直在使用支付api url进行支付，如果支付成功，它将响应状态代码发送到前端[客户端]。我的问题是，当将所有内容移至生产服务器端 api 时不起作用，但在 localhost 中一切正常。不知道我在 firebase.json 或 server-> package.json 或 base url 中哪里出错了。最初在客户端 -> service-> api.js，我设置了 base url: localhost 现在我已经更新到 dev.xx。 firebaseapp.com.