Problems deploying vue app to aws amplify

Question

I have a Vue app that I deployed to was amplify. I noticed that if I click a route it loads but if I refresh that URL the page redirects to an index.html page. Please help if you can.

Answer 1

1- try to add a default route at the end of you in your Vue-router to catch everything. routes: [{ path: '/:pathMatch(.*)', component: main/index/whatever}],

2- add the following rule in your AWS amplify app Rewrites and redirects

/<*> / 200

Answer 2

I solved the issue by going to the rewrite and redirect tabs of amplify and setting . Since I was using history mode for vue, had to do a rewrite rule.

I set the source address to /<*> , target address to /index.html type to 404(rewrite)