Конфигурация Vite в мультиарендной системе

Как использовать Vite для поддержки множества бренд-шаблонов в одном репозитории с динамической маршрутизацией сборки и изоляцией окружений.

---

1. Динамический выбор шаблона маршрутов через SITE_KEY

Во время сборки определяйте соответствующий файл маршрутов арендатора и генерируйте активную точку входа роутера.

function writeBuildRouter(siteKey: string) {
  const sourceFile = path.resolve(__dirname, `../../template/${siteKey}/router/routes.ts`);
  const destinationFile = path.resolve(__dirname, '../../src/router/build.ts');

  const data = fs.readFileSync(sourceFile, 'utf8');
  fs.writeFileSync(destinationFile, data, 'utf8');
}

Преимущества:

• Один репозиторий для множества шаблонов арендаторов
• Меньше дублирования кода
• Выход сборки адаптирован под конкретного арендатора

2. Стратегия переменных окружения

Используйте явные env-файлы и runtime-валидацию.

• .env.development
• .env.staging
• .env.production

Пробрасывайте только необходимые безопасные для клиента переменные через политику префиксов.

3. Конфигурация proxy для разработки

Используйте Vite proxy для API-доменов в локальной разработке, чтобы избежать проблем с CORS.

4. Интеграция i18n и плагинов

Интегрируйте Vue i18n и связанные плагины в централизованный pipeline плагинов Vite, чтобы поведение окружений оставалось консистентным.

5. Конфигурация целевых браузеров

target: {
  browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
  node: 'node16',
}

Это дает баланс между современным синтаксисом и практической совместимостью.

Краткое резюме для интервью

В мультиарендных системах я использую компоновку сборки на основе SITE_KEY, строгую изоляцию окружений и явную политику browser target, чтобы сборка каждого арендатора оставалась предсказуемой и поддерживаемой.