«Выйди за пределы статики» с Vue Router

Давайте разместим наше приложение Vue в сети с Netlify как одностраничное приложение, но с маршрутизацией, которая предполагает иное.

Чуть ниже я рассмотрел проблему и решение. После этого я установил «код», если вы хотите пройти настройку Netlify с указанным решением.

Эта проблема

Vue Router имеет свойство, которое вы устанавливаете для него, называемое режимом. Вот что об этом говорится в документации маршрутизатора:

Режим по умолчанию для vue-router - режим хеширования - он использует хэш URL для имитации полного URL, чтобы страница не перезагружалась при изменении URL.

Чтобы избавиться от хэша, мы можем использовать режим истории маршрутизатора, который использует history.pushState API для навигации по URL без перезагрузки страницы:

В режиме хеширования наш URL будет выглядеть так localhost:8080/#/endpoint

В режиме истории наш URL будет выглядеть так: localhost:8080/endpoint

При размещении сайта на чем-то вроде Netlify, если вы обновите страницу по любому URL-адресу, кроме «/», вы получите ошибку 404. Это также произойдет, если пользователь попытается получить прямой доступ к URL-адресу на вашем сайте. Это не идеально и действительно ограничивает то, как пользователи взаимодействуют и могут делиться вашим сайтом.

В документации по Vue Router есть информация о том, как это исправить, но не совсем с помощью Netlify. Вы можете ознакомиться с документацией здесь.

Решение

Вы можете исправить это, выполнив всего пару действий, я перечислю их здесь, а затем пройдусь по настройке приложения маршрутизатора, размещению и ремонту маршрутизатора.

Во-первых, в вашей общедоступной папке в приложении vue вам просто нужно добавить _redirects файл с кодом /* /index.html 200

У Netlify есть документация по редиректам здесь.

_redirects не имеет расширения файла. Судя по тому, что я видел, эта настройка специфична для Netlify, поэтому она будет иметь смысл, если вы никогда раньше не слышали о _redirects.

Во-вторых, в вашем router.js настройте 404. Таким образом, если пользователь вводит «плохой» URL, он не просто перенаправляет на нашу домашнюю страницу, но показывает правильный 404. Это выглядело бы как-то нравится:

{
  path: '/*',
  component: FourOhFour
},

FourOhFour - это просто настраиваемый мной компонент, который отображается каждый раз, когда пользователь достигает пути, не указанного выше. Важно, чтобы ваш маршрут 404 был последним в вашем списке маршрутов.

Давай что-нибудь построим

Мы будем использовать:

Создайте приложение с помощью: $ vue create router-netlify, предоставленного вам vue-cli. Затем при появлении запроса выберите «Выбрать функции вручную» - сюда мы добавим маршрутизатор.

Добавьте параметры выше
Выберите «Да» для «Использовать режим истории для маршрутизатора?»
Выберите нужный линтер. & Lint при сохранении
Выберите package.json там, где вы предпочитаете разместить конфигурацию
Вы можете сохранить этот пресет, если хотите
Откройте проект в текстовом редакторе

К счастью, поскольку мы сказали vue добавить маршрутизатор в проект, он установил для нас маршрут и «страницу». Я не собираюсь ничего менять, просто расскажу, как загрузить это на Netlify и исправить наши проблемы с обновлением / перенаправлением.

Теперь, когда проект готов, мы хотим отправить его на GitHub. Вы также можете использовать Bitbucket или GitLab. Я не буду рассказывать, как разместить ваш код на GitHub, но у меня есть сообщение об этом здесь, если у вас возникнут проблемы.

Как только ваш код будет добавлен в репозиторий, мы создадим сайт на Netlify. Шаги следующие:

Завести аккаунт
Зайдите в создание нового сайта
Подключите своего провайдера git
Выберите репо, которое вы хотите использовать
Выберите параметры сборки

Добавьте нашу команду сборки: npm run build и каталог публикации: dist. Затем нажмите на сайт развертывания.

На сборку уйдет немного времени, после чего вы сможете предварительно просмотреть свое развертывание. На данный момент наш сайт работает, вы можете нажать кнопки навигации «Главная» и «О программе», и они будут работать так, как мы ожидали. но вы не можете ввести URL-адрес / about для перехода к нему, вы также не можете обновить страницу «О нас». ХРАМА !!

Перенаправить

Итак, давайте добавим наш _redirects файл, как указано выше, в папку / public внутри вашего приложения. а затем добавьте код /* /index.html 200

Сохраните, зафиксируйте и отправьте свой код в главную ветку. Вернувшись на панель управления Netlify, вы должны увидеть, что новая сборка работает над публикацией, дождитесь ее завершения, а затем перезагрузите свой сайт, размещенный на Netlify.

Теперь вы видите, что можете обновиться на странице «О нас», но если вы попытаетесь перейти на /nope на своем сайте, он загрузит index.html без каких-либо обработанных компонентов. Давайте заменим это на 404.

Пользовательский 404

В папку "Просмотры" мы добавим новый файл FourOhFour.vue с кодом.

<template>
  <div>
    <h1>Four Oh Four you didn't</h1>
    <router-link to="/">Go Home</router-link>
  </div>
</template>

Затем нам нужно добавить это в наш роутер вот так:

...
import FourOhFour from './views/FourOhFour.vue'
Vue.use(Router)
export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    ...
    {
      path: '/*',
      component: FourOhFour
    }
  ]
})

Для длины я заменил здесь код на … Следует отметить, что после объекта about route вам нужно добавить запятую, чтобы вы могли добавить FourOhFour в массив маршрутов.

Вы можете протестировать это локально перед отправкой в мастер, но как только вы это сделаете, сохраните фиксацию и отправьте в мастер.

Снова дождитесь, пока Netlify создаст приложение и протестирует нашу новую страницу 404.

«Выйди за пределы статики» с Vue Router