I have a Vue app which uses Webpack and dynamic imports:
// App.vue
<template>
<div>
<button @click="isBtnClicked = true">Load lazy component</button>
<LazyComponent v-if="isBtnClicked" />
</div>
</template>
<script>
export default {
name: 'App',
components: {
LazyComponent: () => import('./components/LazyComponent'),
},
data: () => {
return {
isBtnClicked: false,
}
}
}
</script>
// components/LazyComponent.vue
<template>
<p>Hello from lazy component</p>
</template>
When the button in the app is clicked, the Webpack runtime dynamically creates a <script> tag and appends it to the head of the document.
Is there a way to modify the src attribute of this generated <script> tag? I would like to add a dynamic query parameter to it appends the element to the DOM.
The currently generated tag looks something like:
<script charset="utf-8" src="/js/0.js"></script>
And I would like it to look like:
<script charset="utf-8" src="/js/0.js?mytoken=12345"></script>
where mytoken and 12345 are generated at runtime.
I am using webpack 4.44.0, vue 2.6.11, and vue-loader 15.9.3.
