Настройка base URL

В Vue Router base URL определяет базовый путь приложения, от которого строятся все маршруты. Это особенно важно при развертывании проекта на сервере, где приложение может находиться не в корневой директории, а, например, в подкаталоге (https://example.com/my-app/). Без правильной настройки базового пути маршруты могут работать некорректно, и ссылки будут вести на неверные адреса.

Определение base URL

При создании экземпляра Vue Router параметр history принимает объект, где можно указать базовый путь:

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const router = createRouter({
  history: createWebHistory('/my-app/'), // base URL указан явно
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ]
});

export default router;
  • createWebHistory('/my-app/') задает базовый URL /my-app/.
  • Все пути в маршрутах (/ и /about) будут интерпретироваться относительно этого базового пути.
  • Без указания базового пути по умолчанию используется '/'.

Динамическая установка base URL через переменные окружения

В проектах, созданных с помощью Vue CLI или Vite, удобно использовать переменные окружения для установки базового пути:

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL), 
  routes: [
    { path: '/', component: () => import('./views/Home.vue') },
    { path: '/about', component: () => import('./views/About.vue') },
  ]
});

export default router;
  • import.meta.env.BASE_URL автоматически подставляет базовый URL, заданный в сборщике.
  • Для Vue CLI это переменная process.env.BASE_URL.
  • Такой подход упрощает развертывание на разных окружениях (локально, staging, production).

Влияние base URL на маршруты и ссылки

Base URL влияет на все навигационные действия и генерацию ссылок с помощью router-link:

<router-link to="/">Главная</router-link>
<router-link to="/about">О нас</router-link>

Если base установлен в /my-app/, то:

  • <router-link to="/"> → https://example.com/my-app/
  • <router-link to="/about"> → https://example.com/my-app/about

Это предотвращает ошибки вида 404 Not Found при открытии страниц напрямую в браузере.

Особенности при использовании History Mode

Vue Router поддерживает history mode (createWebHistory) и hash mode (createWebHashHistory). Base URL имеет разное влияние в этих режимах:

  • History Mode (createWebHistory) Базовый путь определяет часть URL перед маршрутом. Сервер должен быть настроен на возврат index.html для всех маршрутов относительно base URL.

  • Hash Mode (createWebHashHistory) Base URL учитывается, но основная часть маршрута идет после символа #. Проблем с серверной настройкой меньше, так как все маршруты обрабатываются клиентом.

Пример использования hash mode с базовым URL:

import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory('/my-app/'),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ]
});

URL будет иметь вид: https://example.com/my-app/#/about.

Изменение base URL после инициализации

Vue Router не позволяет динамически менять base URL после создания экземпляра. Все пути строятся исходя из начальной конфигурации. Поэтому для разных окружений создаются отдельные конфигурации или используется переменная окружения, как было показано выше.

Проверка корректной работы base URL

  1. Развернуть приложение на подкаталоге (/my-app/).
  2. Открыть страницу напрямую (/my-app/about) в браузере.
  3. Проверить работу <router-link> и router.push.
  4. Убедиться, что сервер настроен для поддержки history mode (возврат index.html для всех маршрутов).

Рекомендации по использованию base URL

  • Для приложений, развернутых в корневом каталоге, оставлять base URL пустым ('/').
  • Для приложений в подкаталоге всегда задавать base URL, чтобы все маршруты и ссылки работали корректно.
  • Использовать переменные окружения для упрощения работы на разных средах.
  • Проверять работу приложения как при навигации через ссылки, так и при прямом открытии страниц в браузере.

Настройка base URL является ключевым элементом правильной маршрутизации в Vue Router и напрямую влияет на стабильность навигации и корректность ссылок при деплое.

Оглавление