I have a Vue application that utilizes 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>
Upon clicking the button in the application, the Webpack runtime dynamically generates a <script> tag and attaches it to the head section of the document.
Is there a method to alter the src attribute of this created <script> tag? I aim to include a dynamic query parameter that will be appended to the element in the DOM.
The current generated tag appears as follows:
<script charset="utf-8" src="/js/0.js"></script>
My desired outcome is for it to appear like this:
<script charset="utf-8" src="/js/0.js?mytoken=12345"></script>
where both mytoken and 12345 are produced during runtime.
The technologies I am using include webpack 4.44.0, vue 2.6.11, and vue-loader 15.9.3.