Как определить текущий base path приложения на стороне клиента?

Базовый путь (base path или public path) — это префикс URL, под которым развёрнуто веб-приложение на сервере. Он отделяет статические ресурсы и маршруты приложения от корня домена. Понимание и правильное определение base path необходимо для корректной работы маршрутизации на стороне клиента, загрузки ресурсов (изображений, скриптов, стилей) и формирования ссылок.

Основные способы определения

Чаще всего base path извлекается из глобального объекта браузера window.location:

// Пример 1: Получение полного пути из URL
const fullPath = window.location.pathname; // Например, '/my-app/users/123'

// Если приложение всегда находится по фиксированному пути
const hardcodedBasePath = '/my-app/';

// Пример 2: Динамическое определение, если приложение стартует с корня
let basePath = '/';
if (fullPath.startsWith('/my-app/')) {
    basePath = '/my-app/';
}
console.log('Base Path:', basePath);

Работа с современными фреймворками

В экосистеме React, Vue или Angular base path обычно настраивается в роутере:

• React Router: Проп basename в компоненте <BrowserRouter>.
• Vue Router: Опция base при создании экземпляра роутера.
• Angular: Настройка APP_BASE_HREF в провайдерах.

Эти фреймворки автоматически учитывают base path при генерации ссылок и навигации.

Практический пример с переменной окружения

В сборках с использованием Webpack или Vite base path часто задаётся через переменную окружения или конфигурацию:

// Конфигурация для продакшн-сборки
const BASE_PATH = process.env.PUBLIC_URL || '';

// Использование для префикса API-запросов или ссылок
function getApiUrl(endpoint) {
    return `${BASE_PATH}/api/v1${endpoint}`;
}

// Использование в разметке для статических ресурсов
const logoUrl = `${BASE_PATH}/static/logo.png`;

Вывод: Определение base path необходимо для корректного развёртывания приложения в поддиректориях (не в корне домена). Используйте настройки роутера вашего фреймворка для централизованного управления или вычисляйте путь из window.location, если требуется динамическое определение. Это гарантирует, что все относительные пути и маршруты будут работать правильно в любой среде развёртывания.