Как обслуживать страницу Vite + Vue3 внутри подпапки
8 февраля 2023 г.Сегодня я потратил много времени, пытаясь понять, как обслуживать страницу Vue3 + Vite внутри подпапки. Поэтому я решил сделать быстрый пост, чтобы помочь другим в такой же ситуации.
URL-адрес был https://example.com/my-page/, и чтобы это произошло, вам нужно внести два изменения.
Первое изменение в vite.config.ts или .js и добавление параметра base: '' при использовании ' ' . Это будет работать с любой вложенной папкой, поскольку URL-адреса ресурсов index.html будут начинаться с ./ и использовать относительный путь.
export default defineConfig({
...,
base: '', // or the path instead if you want '/my-page/'
});
Второе изменение находится внутри вашего маршрутизатора Vue, в моем случае src/router/index.ts и добавьте базу параметров в createWebHistory(base?: string)
const router = createRouter({
history: createWebHistory('/my-page/'),
routes: [...],
...
});
Вы можете поэкспериментировать с location.pathname, чтобы сделать его независимым от имени папки, но при моем тестировании он не работал после перехода на другой маршрут.
В качестве альтернативы вы можете изменить свой index.html вместо маршрутизатора и просто добавить базовый тег, например этот <base href="https://example.com/my-page/" >
Обратите внимание, что если вы выберете другой путь, например: https://example.com/my-page/my-route, и обновите страницу, она может показать вам корневую страницу https: //example.com/. Это то, что вам нужно будет исправить с помощью конфигурации вашего веб-сервера, такого как nginx, и для этого могут не потребоваться все изменения, упомянутые выше. Я рекомендую эту настройку для показа незавершенного проекта, одностраничного лендинга и т. д.
Надеюсь, это было полезно.
Также опубликовано здесь
Ссылки:
- https://v3.vitejs.dev/config/shared-options.html#base
- https://router.vuejs.org/api/#createwebhistory
- https://developer.mozilla.org/en-US/docs/Web /HTML/Элемент/база
Оригинал