Перейти к основному содержимому

Конфигурация 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, чтобы сборка каждого арендатора оставалась предсказуемой и поддерживаемой.