单个Firebase项目下多Web应用的代码与配置优化问询

一、用单一本地项目管理两个站点 #

Firebase Hosting原生支持多站点管理，无需维护两个独立项目，只需通过配置和构建流程区分站点：

1. 控制台确认站点：确保Firebase控制台已创建appone和apptwo两个托管站点
2. 配置firebase.json：将hosting字段改为数组，为每个站点指定目标、构建产物目录和预部署命令：

{
  "hosting": [
    {
      "target": "appone",
      "public": "dist/appone",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      "predeploy": ["npm run build:appone"]
    },
    {
      "target": "apptwo",
      "public": "dist/apptwo",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      "predeploy": ["npm run build:apptwo"]
    }
  ]
}

3. 绑定站点目标：在本地执行命令，将配置中的目标与控制台站点关联：

firebase target:apply hosting appone appone
firebase target:apply hosting apptwo apptwo

4. 添加构建脚本：在package.json中设置独立的构建/部署命令，区分不同站点的环境：

{
  "scripts": {
    "build:appone": "APP_TARGET=appone vite build --outDir dist/appone",
    "build:apptwo": "APP_TARGET=apptwo vite build --outDir dist/apptwo",
    "deploy:appone": "firebase deploy --only hosting:appone",
    "deploy:apptwo": "firebase deploy --only hosting:apptwo"
  }
}

二、编写通用tools.js自动适配应用名称 #

有两种实用方案实现自动适配，按需选择：

方案1：运行时通过域名判断 #

无需构建工具介入，直接根据当前访问域名动态设置变量：

// tools.js
let appVar, localAppNbr, appName;
const currentHost = window.location.hostname;

switch(currentHost) {
  case 'appone.web.app':
    appVar = "the-app-for-Peter";
    localAppNbr = 194;
    appName = 'appone';
    break;
  case 'apptwo.web.app':
    appVar = "the-app-for-Susy";
    localAppNbr = 749;
    appName = 'apptwo';
    break;
  default:
    // 本地开发默认值
    appVar = "dev-app";
    localAppNbr = 000;
    appName = 'dev';
}

export { appVar, localAppNbr, appName };

方案2：构建时注入环境变量 #

适合需要在构建阶段确定变量的场景（如静态资源路径），以Vite为例：

1. 项目根目录创建环境文件：

# .env.appone
VITE_APP_VAR=the-app-for-Peter
VITE_LOCAL_APP_NBR=194
VITE_APP_NAME=appone

# .env.apptwo
VITE_APP_VAR=the-app-for-Susy
VITE_LOCAL_APP_NBR=749
VITE_APP_NAME=apptwo

2. 修改构建脚本，指定环境模式：

{
  "scripts": {
    "build:appone": "vite build --mode appone --outDir dist/appone",
    "build:apptwo": "vite build --mode apptwo --outDir dist/apptwo"
  }
}

3. 在tools.js中直接读取环境变量：

// tools.js
export const appVar = import.meta.env.VITE_APP_VAR;
export const localAppNbr = Number(import.meta.env.VITE_LOCAL_APP_NBR);
export const appName = import.meta.env.VITE_APP_NAME;

三、通过Firebase配置指定对应函数文件 #

结合构建流程和动态导入，可自动加载对应站点的函数文件：

方案1：构建时动态导入 #

基于环境变量在构建阶段确定导入的函数文件：

// 主入口文件（如app.js）
import { appName } from './tools.js';
// 根据appName动态导入对应函数
const appFunctions = await import(`./${appName === 'appone' ? 'appFunctions' : 'app2ndFunctions'}.js`);

// 使用函数
appFunctions.appFnOne();
appFunctions.appFnTwo();

方案2：预构建替换文件 #

在预部署阶段复制对应函数文件到统一路径，代码中固定导入：

1. 修改firebase.json的预部署命令，添加文件复制步骤：

{
  "hosting": [
    {
      "target": "appone",
      "public": "dist/appone",
      "predeploy": ["cp src/appFunctions.js src/activeFunctions.js", "npm run build:appone"]
    },
    {
      "target": "apptwo",
      "public": "dist/apptwo",
      "predeploy": ["cp src/app2ndFunctions.js src/activeFunctions.js", "npm run build:apptwo"]
    }
  ]
}

2. 代码中固定导入统一路径的文件：

import { appFnOne, appFnTwo, appFnThree } from './activeFunctions.js';

内容的提问来源于stack exchange，提问作者Michel