unable to add inline and external javascripts into vue js file?

Question

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 "./" - https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports. Related: https://stackoverflow.com/questions/41395641/vuejs-difficulties-to-build-with-relative-path — Ezra Siton, Mar 30 '20 at 14:52
Why 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. https://webpack.js.org/guides/lazy-loading/ — Alex Brohshtut, Mar 30 '20 at 15:00

Syed · Answer 1 · 2020-03-31T05:54:27.723

1

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>

edited Mar 31 '20 at 05:54

answered Mar 31 '20 at 05:28

Syed

15,657
13
120
154

score 1 · Answer 2 · edited Mar 31 '20 at 05:58

1

Check this "How to add external JS scripts to VueJS Components" or search it in stackoverflow search box. Hope you will get the answer.

edited Mar 31 '20 at 05:58

Syed

15,657
13
120
154

answered Mar 31 '20 at 05:32

Hasan

41
4

unable to add inline and external javascripts into vue js file?

2 Answers2