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

One way to make this work in with routing in history mode and without using CloudFront is to create the files that your URIs would point to. So let's say you use index.html as your entry point and have only one other page which you give path page2.html.

Then you should adapt your build and deploy process to do the following:

1. Build your source into a production distribution (E.g. using npm run build)
2. Make sure that for your router links you create a file per path that is a copy of the original file. In case of the example I mention it would be creating a copy of 'dist/index.html' to 'dist/page2.html'
3. Copy the dist folder contents to your S3 bucket

Note that the order of step 1 and 2 is important. This can be easily done in a script that publishes your website. I have just used this approach with the result I wanted; allowing refreshinag a page and opening links in a new tab.

Drawbacks I see is: - overhead of storing the copies of the files - have to make sure if you add a page not to forget to update your build and deploy scripts.