Вы разместили свое приложение (одностраничное приложение) на Netlify и у вас разбилось сердце, когда вы перезагрузили любую страницу / компонент и увидели «Страница не найдена»?

Не волнуйтесь, решение почти не простое, поскольку это всего лишь 1 простая задача.

БЫСТРО РАЗБИРАЙТЕ ПРОБЛЕМУ.

Vue Router имеет свойство, которое вы устанавливаете; это называется режим. Он может иметь разные значения, и каждое значение имеет свою уникальность.

Вот что говорится в документации 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. Ознакомиться с документацией можно здесь.

РЕШЕНИЕ

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

/ * /index.html 200.

Узнайте больше, потому что у Netlify есть документация по перенаправлениям здесь.

И угадайте, вот и все !!!

Но есть одна маленькая проблема: первоначальная проблема решена, но необходимо исправить новое поведение приложения. Если пользователь вводит неправильный URL-адрес, он автоматически перенаправляется на страницу index.html, и я уверен, что вам это не нужно.

Сью, ты знаешь, как это сделать. Но если вы этого не сделаете.

ВЗГЛЯД НА РЕШЕНИЕ НОВОЙ ПРОБЛЕМЫ

Просто создайте собственную страницу 404, настройте новый маршрут следующим образом:

{
путь: ‘/ *’,
компонент: 404
},

в routes.js или route / index.js в зависимости от того, что вы используете. И это позволит вашему приложению перенаправлять на правильную страницу 404 всякий раз, когда пользователь вводит неправильный URL.

Вы можете успешно протестировать свое приложение.