Today, I encountered a persistent issue with my VueJS app hosted on amplify. Everything is running smoothly, except for one thing.
I need to provide direct access to a file (specifically to register an Apple merchant ID with stripe).
I attempted to create a route in my route/index.js that redirects to a component which opens the merchantid file using window.open('myfile'). This solution worked fine locally and in the build, but failed once deployed through amplify built with webpack.
//router/index.js
import WellKnown from '@/components/AppleVerification.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/.well-known/apple-app-site-association',
component: WellKnown,
}
]
const router = new VueRouter({
mode: 'history',
routes
})
export default router
// AppleVerification.vue
<template>
<div></div>
</template>
<script>
export default {
name: 'WellKnown',
props: {
file: String
},
mounted () {
window.open('file:///.well-known/apple-developer-merchantid-domain-association')
}
}
</script>
After trying to set up a redirection in the amplify console with the URL priority and target address as the file, it still did not work as expected.
https://i.stack.imgur.com/ryGMF.png
I am stuck on how to grant access to a file in my sources with a direct URL. Any assistance would be greatly appreciated.
Thank you