Начало в моем блогеryougifujino.com.
vue-routerразделен наhashа такжеhistoryрежим, первый режим является режимом по умолчанию, а выражение URL-адресаhttp://yoursite.com#home, довольно некрасиво. URL-представление последнего находится в формеhttp://yoursite.com/home, более красивый.
Но если вы хотите использоватьhistoryрежиме нам нужна дополнительная настройка на бэкенде. В этой статье мы обсудим, как настроить и почему.
historyКак настроить режим
Давайте посмотрим, как официальная документация учит нас настраивать:Режим истории HTML5.
прежде всего кmodeУстановить какhistory:
const router = new VueRouter({
mode: 'history',
routes: [...]
})
Затем настройте серверную часть (здесь используется nginx):
location / {
try_files $uri $uri/ /index.html;
}
А потом... пропало! Очевидно, что официальное руководство относительно короткое, и мы действительно столкнемся с некоторыми проблемами в этом руководстве.
historyПрактика и принцип настройки режима
НАСТОЯТЕЛЬНО РЕКОМЕНДУЕТСЯ: прежде чем читать этот раздел, взгляните наэта часть документаа такжеэта часть документа.
Так как официальная документация нас этому учит, давайте попрактикуемся в том, что там написано.
Настраивается только передняя часть
Во-первых, мы будемmodeУстановить какhistory, но не настраивайте серверную часть. Тогда, если наш маршрут выглядит так:
const routes = [
{path: '/home', component: Home},
{path: '/', redirect: '/home'}
];
Разворачиваем проект с nginx и вводим в адресной строкеhttp://localhost:8080После того, как (здесь настроен порт 8080), вы обнаружите, что адресная строка изменитсяhttp://localhost:8080/home,а такжевыглядитвсе нормально,казатьсяМаршрутизацию также можно переключать нормально без других проблем (на самом деле возникают проблемы, обсуждаемые позже). Кажется, что этого можно добиться без настройки бэкэнда, как сообщает нам официальный сайт.historyрежиме, но если набрать прямо в адресной строкеhttp://localhost:8080/home, вы обнаружите, что получаете страницу 404.
Такhttp://localhost:8080Почему он (частично) отображается нормально? Причина на самом деле очень проста, вы посещаетеhttp://localhost:8080, статический сервер (здесь nginx) по умолчанию пойдет в целевой каталог (здесьlocationсерединаrootуказанный каталог)index.html(это поведение nginx по умолчанию, когда после порта нет дополнительного пути), есть ли этот файл в целевом каталоге? имеют! Затем статический сервер возвращает вам этот файл сvue-routerВперед, естественно (часть) нормального отображения.
Но если вы посетите напрямуюhttp://localhost:8080/home, статический сервер перейдет в целевой каталог, чтобы найтиhomeфайл, есть ли этот файл в целевом каталоге? нет! Так что, естественно, это 404.
Настроить серверную часть
для прямого доступаhttp://localhost:8080/homeДля успеха нам нужно выполнить некоторые настройки на бэкэнде (здесь, nginx).
Прежде всего, подумайте, как достичь этой цели?
в традиционномhashРежим (http://localhost:8080#home), даже если настройка не требуется, статический сервер всегда будет искатьindex.htmlи вернуться к нам, тоvue-routerполучите#Следующие символы используются в качестве параметров для преобразования страницы интерфейса.
По аналогии вhistoryрежиме, все, что нам нужно, это: вводhttp://localhost:8080/home, но окончательный возврат такжеindex.html,Потомvue-routerполучитеhomeВ качестве параметра преобразуйте страницу интерфейса. Итак, в nginx, кто может это сделать? ответtry_files.
Первый взглядtry_filesСинтаксис:try_files file ... uri;
Тогда взгляните на официальную документацию по его введению:
Проверяет наличие файлов в указанном порядке и использует для обработки запроса первый найденный файл, обработка ведется в текущем контексте, путь к файлу строится из параметра файла в соответствии с директивами root и alias Возможно проверить существование каталога, указав косую черту в конце имени, например, «$uri/».Если ни один из файлов не был найден, выполняется внутреннее перенаправление на uri, указанный в последнем параметре.
в том смысле, что он будет следоватьtry_filesСледующие параметры сопоставляются по очередиrootсоответствующий файл или папку в формате . Если он соответствует файлу, он вернет этот файл; если он соответствует папке, он вернет файл в этой папке.indexФайл, указанный в директиве. последнийuri参数将作为前面没有匹配到的fallback。 (Уведомлениеtry_filesИнструкция требует не менее двух параметров)
В качестве примера возьмем мой собственный сайт:
location / {
root /data/www/rf-blog-web;
index index.html;
try_files $uri $uri/ /index.html;
}
$uriявляется переменной в nginx, например, URL-адрес, который я посещаю,http://localhost:8080/home, то представляет/home.
существуетrf-blog-webВ этом каталоге нет подкаталогов, только одинindex.htmlИ несколько сжатых файлов .js, имена которых являются хэшами. когда мы просимhttp://localhost:8080/homeПри использовании этого адреса сначала проверьте, неhomeЭтого файла нет, поищите его сноваhomeкаталог, ни. Таким образом, в конечном итоге он найдет третий параметр и вернетindex.html, по этому правилу путь url во всех роутах будет располагаться в концеindex.html.vue-routerЗатем получите параметры для преобразования страницы переднего плана, пока что мы можем пройтиhttp://localhost:8080/homeЭтот адрес был успешно получен.
а также$uriФункция этого параметра на самом деле состоит в том, чтобы соответствовать этим файлам .js, и$uri/В этом примере это не очень полезно и может быть удалено.
historyПроблемы и решения, с которыми можно столкнуться в режиме
После изменения моего проекта (используя ленивую загрузку в маршрутизации) наhistoryРежим процесса, иногда обнаруживается, что возникают ошибки загрузки фрагмента ситуации, открытый хромированный фрагмент сети обнаружил, что 404 загрузки, потому что URL-адрес запрашивает более одного пути. я здесьздесьНашел решение.
LinusBorg сказал, что потому что вhistoryПри переключении маршрутов в режиме мы фактически меняем URL-адрес страницы, поэтому среда выполнения веб-пакета будет думать, что она находится вexample.com/some/path. еслиpublicPathзадан относительный путь, поэтому, когда веб-пакет загружает фрагмент, он может статьexample.com/some/path/static/js/3.jsТакой путь, однако реальный путь чанкаexample.com/static/js/3.js, поэтому нам нужноpublicPathустановить абсолютный путь (publicPath: '/') Для решения этой проблемы.