Having recently ventured into webpack, I have watched several tutorials and successfully configured it for my project.
One of the challenges I encountered was loading vuejs components asynchronously using the following method:
<template>
<div id="app">
<component
:is="template"
>
</component>
</div>
</template>
<script>
export default {
name: 'App',
computed: {
template () {
return () => import(`@/templates/${this.$template.name}`)
}
},
mounted () {
this.template().then(comp => {
this.$nextTick(() => {
//...
})
})
}
}
</script>
Upon compiling with webpack, three files are generated:
- app.js
- 0.js
- index.html
This setup serves my purpose as I aim to create a widget, necessitating only one js file inclusion (app.js) that calls 0.js during execution. Everything works smoothly when app.js is included on the index.html page from the same host.
However, a challenge arises when I attempt to include the app.js file from a different host.
For instance, if mywebsite.com/index.html includes the app.js script like so:
<!--https://mywebsite.com/index.html-->
<script src="https://my_widget_host.com/app.js"></script>
An issue crops up where a 404 error occurs while trying to retrieve the 0.js file, because the call is directed at instead of
I am seeking a solution to prefix the `0.js` file with the URL of the server hosting the file. Is there a way to achieve this?