Vue. js - Как перенаправить все запросы на один и тот же компонент - PullRequest
Новая
       8

Vue. js - Как перенаправить все запросы на один и тот же компонент

0 голосов
/ 14 февраля 2020

Я новичок в Stack Overflow, я новичок в Vue. js, поэтому, пожалуйста, прости меня, если я заранее что-то делаю неправильно:)

Я создаю приложение, которое имеет только основной компонент, который находится в моем каталоге root (/index.html). Основываясь на имени, переданном пути, этот компонент загружает json с тем же именем и обслуживает SPA на его основе (важно: он не не отображает чистый json, он использует json чтобы смонтировать SPA и эта часть работает нормально). Таким образом, пути могут быть любой из следующих (они всегда dynamici c): 

http://my-example-site.s3-website-sa-east-1.amazonaws.com/*foo*
http://my-example-site.s3-website-sa-east-1.amazonaws.com/*bar*
http://my-example-site.s3-website-sa-east-1.amazonaws.com/*anotherfoo*
http://my-example-site.s3-website-sa-east-1.amazonaws.com/*anotherbarandsoon*

Это прекрасно работает, когда я работаю на dev, но когда я собираю его на S3, я получаю сообщение 404 о том, что он не может найти путь "foo". Самым быстрым решением было установить для моей страницы ошибок «index. html» на S3, но, конечно, это не очень хорошая идея, поскольку я всегда получаю 404 (хотя страница отображается правильно, даже если я не получаю 200 или что-то похожее)

Я провел некоторое исследование (возможно, этого недостаточно, извините :() и нашел этот код: 

    const router = new VueRouter({
      base: __dirname,
      mode:'history',
      routes: [
        {
              path: '*',
              redirect: '/index.html'
          }
      ]
    });
    var vm = new Vue({
        router,
        el: '#app',
        render: h => h(App)
    });

    global.vm = vm;

Я не получаю ошибок компиляции, и он работает нормально ... пока я не поставлю его на S3. Та же проблема: 404.

Итак, вопрос в том, что я делаю не так?

1 Ответ

0 голосов
/ 01 мая 2020

Как я писал выше, кажется, что S3 сам по себе не обрабатывает эти запросы правильно. Решение состояло в том, чтобы использовать Cloudfront, у которого есть больше способов справиться с обработкой ошибок и переписать коды ответов - я настроил его на перехват 404 ошибок и переписал их на 200.

...