Vue.js Router: history mode and AWS S3 (RoutingRules)

Question

I have a Vue.js application up and running with Amazon S3 and Cloudflare.

When I open the index and browse to /dashboard, everything works fine. But when I open a route

Answer 1

I'm hosting a static PWA made in Vue on S3 using "Static website hosting" and it works as expected. What I did was quite simple - I've added this:

  
    
      403
    
    
      
    
  

To the Properties of the S3 bucket. See image below:

For my S3 bucket, everytime you try to access a file that doesn't exist you will receive a 403 (forbidden) instead of a 404. That is why I've changed the HttpErrorCodeReturnedEquals to 403. I've also replaced the ReplaceKeyWith with an empty string as "index.html" as not triggering the correct route.

I hope it helps.

Cheers, Alex