Astro多租户网站搭建：动态引用静态资源并保留优化

针对你需要支持80+租户、页面结构一致但静态资源差异化的场景，以下是几种可行的方案，既能保留Vite对静态资源的压缩、缓存优化，又避免冗余代码：

方案1：静态生成（SSG）+ 动态路由复用组件 #

如果租户列表固定，推荐用这种方式，Astro会为每个租户预生成优化后的静态页面，代码仅需维护一份：

1. 创建动态路由页面pages/[clientName].astro，在getStaticPaths中返回所有租户标识：

---
// 可从配置文件/数据库读取租户列表，这里示例用数组
const tenants = ['tenant-a', 'tenant-b', 'tenant-c', /* ... 其他80+租户 */];

export async function getStaticPaths() {
  return tenants.map(clientName => ({
    params: { clientName },
    props: { clientName }
  }));
}

const { clientName } = Astro.props;

// 静态导入当前租户的资源，Vite会自动优化
import logo from `../assets/${clientName}/logo.svg`;
import style from `../assets/${clientName}/style.scss`;
import favicon from `../assets/${clientName}/favicon.ico`;
---

<head>
  <link rel="icon" type="image/x-icon" href={favicon} />
  <link rel="stylesheet" href={style} />
</head>
<body>
  <img src={logo} alt="Tenant Logo" />
  <!-- 其他复用的页面结构 -->
</body>

2. 保持统一的资源目录结构：

assets/
├── tenant-a/
│   ├── logo.svg
│   ├── favicon.ico
│   └── style.scss
├── tenant-b/
│   ├── logo.svg
│   ├── favicon.ico
│   └── style.scss
...

这种方式下，Astro会为每个租户生成独立页面，但所有页面复用同一组件逻辑，资源都经过Vite优化，加载速度快。

方案2：服务端渲染（SSR）+ 动态导入+预构建提示 #

如果租户列表动态变化，或需要通过请求参数/子域名实时切换租户，用SSR模式结合动态导入：

1. 配置Vite预构建所有租户资源，确保优化生效：

// vite.config.ts
import { defineConfig } from 'astro/config';

export default defineConfig({
  output: 'server', // 开启SSR
  vite: {
    optimizeDeps: {
      // 用glob匹配所有租户资源，让Vite提前优化
      include: ['../assets/**/*.svg', '../assets/**/*.scss', '../assets/**/*.ico']
    }
  }
});

2. 在组件中通过Astro.locals获取租户标识，动态导入资源：

---
// 从中间件存入的locals中获取租户标识
const { clientName } = Astro.locals;

// 动态导入对应租户的资源，Vite已预构建优化
const logoModule = await import(`../assets/${clientName}/logo.svg?url`);
const styleModule = await import(`../assets/${clientName}/style.scss?url`);
const faviconModule = await import(`../assets/${clientName}/favicon.ico?url`);

const logoUrl = logoModule.default;
const styleUrl = styleModule.default;
const faviconUrl = faviconModule.default;
---

<head>
  <link rel="icon" type="image/x-icon" href={faviconUrl} />
  <link rel="stylesheet" href={styleUrl} />
</head>
<body>
  <img src={logoUrl} alt="Tenant Logo" />
  <!-- 其他复用的页面结构 -->
</body>

3. 配置中间件，从URL参数/子域名提取租户标识并存入locals：

// src/middleware.ts
import { defineMiddleware } from 'astro:middleware';

export const onRequest = defineMiddleware((context, next) => {
  // 示例1：从URL参数获取，如 https://example.com?client=tenant-a
  const clientName = context.url.searchParams.get('client');
  
  // 示例2：从子域名获取，如 https://tenant-a.example.com
  // const clientName = context.url.hostname.split('.')[0];

  if (clientName) {
    context.locals.clientName = clientName;
  }
  return next();
});

方案3：预导入所有租户资源+动态匹配 #

如果不想用SSR或动态路由，可通过Vite的glob导入预加载所有资源，再根据租户标识匹配：

---
// 用glob导入所有租户的资源，Vite会自动优化
import allLogos from '../assets/**/logo.svg?url';
import allStyles from '../assets/**/style.scss?url';
import allFavicons from '../assets/**/favicon.ico?url';

const { clientName } = Astro.locals;

// 匹配当前租户的资源
const logoUrl = allLogos[`../assets/${clientName}/logo.svg`];
const styleUrl = allStyles[`../assets/${clientName}/style.scss`];
const faviconUrl = allFavicons[`../assets/${clientName}/favicon.ico`];
---

<head>
  <link rel="icon" type="image/x-icon" href={faviconUrl} />
  <link rel="stylesheet" href={styleUrl} />
</head>
<body>
  <img src={logoUrl} alt="Tenant Logo" />
  <!-- 其他复用的页面结构 -->
</body>

这种方式适合租户数量不多的场景，避免了SSR的服务器开销，同时保留资源优化。

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