I have html file which has 3 script tags. I want to put these script tags in my vue.js file
my html file
<html>
<body>
<script type="text/javascript">
mxBasePath = "../editors/pure";
</script>
<script type="text/javascript" src="../editors/pure/js/mxClient.js"></script>
<script src="../editors/dist/main.js"></script>
</body>
</html>
So i want to add the 3 script tags seen in the above html to my vue js file.So for this i have tried to create the script tags manually in the mounted function of the vue file as seen below-
my vue js file
<template>
<div id="geApp">
</div>
</template>
<script>
const client = '../editors/pure/js/mxClient.js'
const mains = '../editors/dist/main.js'
mounted () {
var a = document.body.getElementsById("geApp")
let basePath = document.createElement('script')
basePath.innerText = 'mxBasePath = "../editors/pure"'
basePath.async = true
a.appendChild(basePath)
let recaptchaScript = document.createElement('script')
recaptchaScript.setAttribute('src', './pure/js/mxClient.js')
recaptchaScript.async = true
a.appendChild(recaptchaScript)
let processes = document.createElement('script')
processes.setAttribute('src','./dist/main.js')
processes.async = true
a.appendChild(processes)
},
.....
.....
</script>
Unfortunately iam getting an error saying http://localhost/editors/dist/main.js net::ERR_ABORTED 404 (Not Found) from main.js file.So how do i load these scripts correctly in my vue js file?
-
In general, no way to know why relative path throw 404 (Wrong name. Wrong Folder. Wrong format and so on). Try "./" - cli.vuejs.org/guide/…. Related: stackoverflow.com/questions/41395641/…Ezra Siton– Ezra Siton2020年03月30日 14:52:53 +00:00Commented Mar 30, 2020 at 14:52
-
1Why do you need to do this via HTML? A better approach to use webpack for it - just use imports and lazy load components - this way your scripts will be loaded only when needed. webpack.js.org/guides/lazy-loadingAlex Brohshtut– Alex Brohshtut2020年03月30日 15:00:35 +00:00Commented Mar 30, 2020 at 15:00
2 Answers 2
If files that you are trying to add are some libraries/plugins that doesn't support import or require for some reason only then you try to do the way you are adding the file to DOM:
Anyhow, If you are sure and don't care about webpack processing your .js files in anyways, then keep your files in ./public/assets/js/ folder, then just do:
<script src="./assets/js/your-file.js"></script>
Comments
Check this "How to add external JS scripts to VueJS Components" or search it in stackoverflow search box. Hope you will get the answer.