Принудительное включение части хоста в BASE url при использовании сервера разработки Vite
У меня есть несколько нетрадиционная установка, в которой я использую Vite/Vue SSR сервер для рендеринга шаблонов за сервером Django. Т.е. Django вызывает node, получает html и отправляет его обратно в браузер. Я столкнулся с проблемой, что сервер Vite не уважает полный BASE
url, как https://bar.com/foo/
(он вырезает часть origin, что является документированным поведением). Однако без части origin сгенерированный html и другие активы содержат урлы, которые браузер рассматривает как относительные к происхождению сервера Django, что, очевидно, не работает. Есть ли способ заставить Vite включить origin в BASE
url, или мой единственный вариант - проксировать обратно на сервер Vite из Django?
Я добился этого, добавив тег <base>
, позаботившись о том, чтобы поместить его сразу после тега <head>
. В противном случае Vite вставлял свой тег клиентского сценария перед тегом <base>
, а тег <base>
применялся только к элементам, которые шли после него. В документации MDN для <base> есть явное предупреждение о необходимости помнить об этом:
Предупреждение: Элемент
<base>
должен иметь атрибут href, атрибут target или оба атрибута. Если хотя бы один из этих атрибутов указан, элемент<base>
должен располагаться перед другими элементами со значениями атрибутов которые являются URL, например, атрибут href элемента<link>
.
Для добавления тега <base>
перед тегом клиентского скрипта Vite я использовал плагин Vite transformIndexHtml:
plugins: [
vue(),
{
name: 'vite-client-script-transform',
transformIndexHtml(html: string) {
return html.replace(
'<head>',
`<head><base href="http://localhost:5173" />`,
)
}
}
],