Vue.js中无法正确引入内联及外部JavaScript脚本的问题求助

咱们先拆解下你遇到的问题，然后一步步给出靠谱的解决方法：

核心问题排查 #

你碰到的404错误和代码里的两个小问题有关：

1. DOM获取语法错误：你写的document.body.getElementsById("geApp")是错的，正确方法是document.getElementById("geApp")（注意是单数形式getElementById，没有末尾的s）。
2. 脚本路径不匹配：你原来的HTML里脚本用的是基于根目录的../editors/...路径，但Vue组件里写成了./pure/...，浏览器会从当前页面路径去查找资源，自然找不到对应文件。
3. 加载顺序隐患：mxBasePath需要在mxClient.js加载前定义，但你设置了async=true，异步脚本的加载顺序是不确定的，可能导致依赖未定义的错误。

正确实现方式 #

方法一：在mounted钩子中按依赖顺序加载脚本 #

修正路径和DOM逻辑，同时保证脚本按依赖顺序执行：

<template>
  <div id="geApp"></div>
</template>

<script>
export default {
  mounted() {
    const container = document.getElementById("geApp");
    if (!container) return;

    // 1. 先定义mxBasePath，确保后续脚本能读取到这个变量
    const basePathScript = document.createElement('script');
    basePathScript.type = 'text/javascript';
    basePathScript.innerText = 'mxBasePath = "../editors/pure"';
    container.appendChild(basePathScript);

    // 2. 加载mxClient.js，等它加载完成后再加载main.js
    const mxClientScript = document.createElement('script');
    mxClientScript.type = 'text/javascript';
    mxClientScript.src = '../editors/pure/js/mxClient.js';
    
    mxClientScript.onload = () => {
      const mainScript = document.createElement('script');
      mainScript.src = '../editors/dist/main.js';
      container.appendChild(mainScript);
    };
    
    container.appendChild(mxClientScript);
  }
}
</script>

方法二：直接在public/index.html中引入脚本（更简单） #

如果这些脚本是全局需要的，直接在项目根目录的public/index.html里添加这三个标签是最省心的，和你原来的HTML写法一致：

<!-- public/index.html -->
<html>
  <body>
    <div id="app"></div>
    <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>

这样Vue项目启动后，脚本会在页面初始化时就加载完成，不需要在组件里手动创建标签。

额外提示 #

• 如果你的editors文件夹放在项目的public目录下，可以用绝对路径（比如/editors/pure/js/mxClient.js），这样能避免相对路径带来的混乱。
• 当脚本之间有依赖关系时，尽量不要加async=true，不然可能出现变量未定义的报错。

内容的提问来源于stack exchange，提问作者Vignesh Swaminathan