如何在一个项目下创建多个 Vue 应用

Question

我是 Vue js 的新手，我正在使用 firebase 开发一个电子商务项目。我在 firebase 中看到有多种托管功能，可以帮助我在两个不同的域中托管客户端和管理端。我不知道如何在一个项目文件夹中创建两个应用程序，例如 example 角度。如果有人知道，请分享您的想法

Answer 1

关注这个

第 0 步 - Firebase 设置

---

在本教程中，my-app 是我的 Firebase 项目 ID
my-app-public Web 应用关联到 my-app 托管站点（默认托管站点以项目 ID 作为名称）
my-app-admin Web 应用关联到 my-app-admin 托管站点

步骤 1

---

将您的公共和管理应用程序移到新目录中

my-app/
├── public-site/
└── admin-site/

第二步

---

使用 firebase 从 my-app/ 初始化，当然还要选择要设置的托管功能

firebase init

不要注意firebase要求公共名称文件夹

第三步

---

将应用的构建路径设置为目标 public 和 admin。
编辑 firebase.json 文件并添加您的应用。

{
    "hosting": [
        {
          "target": "public",
          "public": "public-site/dist",
          "ignore": [
            "**/.*",
            "**/node_modules/**"
          ]
        },
        {
          "target": "admin",
          "public": "admin-site/dist",
          "ignore": [
            "**/.*",
            "**/node_modules/**"
          ]
        }
    ],
}

第四步

---

将目标链接到您的 Firebase 托管站点。 （托管网站！= Web 应用程序）
编辑 .firebaserc，如果它不存在，请在 my-app/ 的根目录下创建它

{
  "projects": {
    "default": "my-app", # firebase project id
  },
  "targets": {
    "my-app": { # firebase project id
      "hosting": {
        "public": [
          "my-app" # public hosting site id
        ],
        "admin": [
          "my-app-admin" # admin hosting site id
        ]
      }
    },
  }
}

现在如果你输入

firebase target

你应该得到

[ hosting ]
public (my-app)
admin (my-app-admin)

第 5 步

---

构建你的两个应用程序

cd public-site/
npm run build

确保您的应用构建在 dist/ 文件夹中

第 6 步

---

部署两个应用

firebase deploy --only hosting

或者只部署公共应用

firebase deploy --only hosting:public

您的应用应该部署到

• https://my-app.firebaseapp.com/
• https://my-app-admin.firebaseapp.com/

奖励 - 在 master (Github) 上合并构建和部署您的应用

---

第一次使用

firebase init hosting:github

并按照 CLI 说明进行操作，它应该询问您的 repo
检查您的存储库是否具有 Firebase 服务帐户密钥

• 继续您的 github 存储库 > 设置 > 安全性
• 您应该会看到一个名为 FIREBASE_SERVICE_ACCOUNT_MY_APP 的秘密环境变量

让我们在你的项目中设置你的 github 工作流，删除上一个命令生成的 .github/workflows 中的 .yml 文件并创建你自己的工作流（文件名无所谓）：

name: Deploy on PROD to Firebase Hosting
'on':
  push:
    branches:
      - master # branch to target
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install dependencies & build public-site
        run: npm ci && npm run build
        working-directory: public-site
      - name: Install dependencies & build admin-site
        run: npm ci && npm run build
        working-directory: admin-site
      - name: Deploy websites
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MY_APP }}' # edit here
          projectId: my-app # edit here
          channelId: live

因此，master 上的每次推送/合并都将构建每个应用程序并将它们部署在 Firebase 托管上