Приложение Nuxt возвращает 404 при обновлении динамических маршрутов (Tomcat Server) - PullRequest
Новая
       6

Приложение Nuxt возвращает 404 при обновлении динамических маршрутов (Tomcat Server)

1 голос
/ 19 июня 2019

Я делаю следующее:
- Построение производства: npm run generate
- Я копирую папку dist в Tomcat Webapps, и она отлично работает
- всякий раз, когда я обновляю динамический маршрут, он показывает 404

URL-адреса, которые работают: 

https://ip:port/entryPath/dashboard/user

URL, которые не работают: 

https://ip:port/entryPath/dashboard/user/123
https://ip:port/entryPath/dashboard/user/123/settings
https://ip:port/entryPath/dashboard/user/123/privacy

Я хочу предоставить URL-адрес, например: 

https://ip:port/entryPath/dashboard/user/123/activity

Таким образом, другие пользователи, просто щелкнув по URL, должны иметь прямой доступ к нему. Но это просто заканчивается 404, где бы я ни развернул.

Обратите внимание:
Я намерен развернуть содержимое папки dist в папке веб-приложений Tomcat.

1 Ответ

0 голосов
/ 20 июня 2019

Когда ваше приложение работает как одностраничное приложение (SPA), все происходит на этой исходной странице входа - вы фактически не загружаете новую страницу при переходе между маршрутами.Пока вы не обновите страницу, не имеет значения, соответствуют ли эти маршруты фактическим html-файлам на сервере, потому что ваш SPA знает, что делает.Однако, если вы перезагрузите страницу или войдете с динамического маршрута, если в этом URL нет файла html, статический сервер будет обслуживать 404, потому что он не знает, что еще делать.

Возможно, вы понимаетевсе это уже с тех пор, как вы запускаете generate для создания статических страниц.Но команда Nuxt generate знает, как генерировать страницы для файлов *.vue в вашем каталоге pages. Динамические маршруты игнорируются .Проверьте вашу dist папку, которую вы загрузили - должен быть соответствующий путь для каждого из ваших рабочих URL (которые соответствуют вашему каталогу pages), но вы не найдете файлы для ваших динамических маршрутов.

Чтобы решить эту проблему, вам нужно предоставить массив динамических маршрутов для команды generate.Вы можете сделать это, добавив что-то вроде к nuxt.config.js: 

  generate: {
    // create an array of all routes for generating static pages
    // careful, this is only used by `npm run generate`. These must match SPA mode routes
    routes: function () {
      return axios.get(
        'https://jsonplaceholder.typicode.com/users'
      )
      .then((response) => {
          let users = response.data.map((user) => {
              return {
                route: '/users/' + user.id,
                payload: user
              }
          });
          return ['/some-other-dynamic-route-or-array-of-routes/', ...users]
       });
     }
   }

Вот хорошая статья о статических сайтах с Nuxt с примерами

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

Редактировать: Вы также можете использовать режим хеширования .Поэтому вместо https://ip:port/entryPath/dashboard/user/123 ваш URL будет https://ip:port/entryPath#dashboard/user/123.В этом случае сервер всегда запрашивает ваш корневой SPA index.html, который будет использовать маршрут, чтобы определить, что делать (поэтому он должен работать так же, как сейчас, когда вы переходите на этот маршрут).Если вы сделаете это таким образом, вы просто будете использовать режим SPA, и вам вообще не нужно будет создавать какие-либо ваши страницы.Это не хорошо для SEO, но у вас будут общие URL-адреса, которые работают сразу.

...