无法将内联和外部 javascripts 添加到 vue js 文件中？答案

【问题标题】：unable to add inline and external javascripts into vue js file?无法将内联和外部 javascripts 添加到 vue js 文件中？
【发布时间】：2020-07-10 23:07:02
【问题描述】：

我有一个包含 3 个脚本标签的 html 文件。我想把这些脚本标签放在我的 vue.js 文件中

我的 html 文件


<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>

所以我想将上面 html 中看到的 3 个脚本标签添加到我的 vue js 文件中。所以我有尝试在 vue 文件的挂载函数中手动创建脚本标签，如下图-

我的 vue js 文件

<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>

不幸的是，我从 main.js 文件中收到一条错误消息：http://localhost/editors/dist/main.js net::ERR_ABORTED 404 (Not Found)。那么如何在我的 vue js 文件中正确加载这些脚本？

【问题讨论】：

一般来说，没有办法知道为什么相对路径会抛出 404（错误的名称。错误的文件夹。错误的格式等等）。试试“./”-cli.vuejs.org/guide/…。相关：stackoverflow.com/questions/41395641/…
为什么需要通过 HTML 来做这件事？为它使用 webpack 的更好方法 - 只需使用导入和延迟加载组件 - 这样您的脚本将仅在需要时加载。 webpack.js.org/guides/lazy-loading

标签： javascript html vue.js

【解决方案1】：

如果您尝试添加的文件是某些库/插件由于某种原因不支持 import 或 require，那么您尝试按照您将文件添加到 DOM 的方式进行操作：

无论如何，如果您确定并且不关心webpack 无论如何处理您的.js 文件，请将您的文件保存在./public/assets/js/ 文件夹中，然后就这样做：

<script src="./assets/js/your-file.js"></script>

【讨论】：

【解决方案2】：

勾选这个“How to add external JS scripts to VueJS Components”或者在stackoverflow搜索框中搜索。希望你能得到答案。

【讨论】：