Amplify - Vue - App --> IFrame source is always redirected to the main index.html page

The issue you're experiencing with your Vue app deployed on AWS Amplify, where the iframe content is being redirected to the main index.html, is likely due to Amplify's default routing behavior for single-page applications (SPAs). To resolve this and ensure your iframe loads the correct content, you'll need to adjust the routing configuration in Amplify.

Here's how you can address this:

1. Configure custom rewrites and redirects in Amplify: Navigate to your Amplify console, go to "Rewrites and redirects" under the app settings. You'll need to add rules that prevent Amplify from redirecting your iframe content to the main index.html.

2. Add a rule for your static content: Create a rule that allows direct access to your static files without redirecting. For example: Source: </^/public/(.*)$/ Target: /public/$1 Status: 200 (OK)

3. For future S3 storage content: When you implement S3 storage for your iframe content, you'll need to ensure proper CORS (Cross-Origin Resource Sharing) configuration on your S3 bucket to allow access from your Amplify-hosted domain.

4. Update your Vue router configuration: Make sure your Vue router is configured to handle only the routes it needs to, and not interfere with the iframe content paths.

5. Test thoroughly: After making these changes, deploy your app again and test to ensure the iframe loads the correct content without redirecting.

By implementing these steps, you should be able to resolve the redirection issue and have your iframe display the intended content both for your current static files and future S3-hosted content. Remember to adjust the exact configuration based on your specific file structure and routing needs.

Sources
I getting the 301 issue while deploy my code in the aws amplify | AWS re:Post
How to host multiple pages/routes in Amplify App | AWS re:Post
Deploy React and Server Side Rendered Apps and Static Sites - Amplify Hosting - AWS