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 "./" - cli.vuejs.org/guide/…. Related: stackoverflow.com/questions/41395641/… — Ezra Siton
– Ezra Siton, Commented Mar 30, 2020 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. webpack.js.org/guides/lazy-loading — Alex Brohshtut
– Alex Brohshtut, Commented Mar 30, 2020 at 15:00

Syed · Accepted Answer · 2020-03-31 05:54:27Z

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, 2020 at 5:54

answered Mar 31, 2020 at 5:28

Syed

16.6k15 gold badges128 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Syed · Accepted Answer · 2020-03-31 05:58:50Z

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, 2020 at 5:58

Syed

16.6k15 gold badges128 silver badges159 bronze badges

answered Mar 31, 2020 at 5:32

Hasan

414 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related