Javascript 如何通过脚本标记将Vue.js应用程序加载到现有网页中？

我想通过脚本标记将Vue.js应用程序加载到现有网页中

目前，在Vue应用程序中运行

npm run build

后，我得到了7个编译文件：

app.js

app.js.map

manifest.js

manifest.js.map

vendor.js

vendor.js.map

app.css

我想我可以加载这3个js文件（清单、供应商和应用程序-不包括地图文件）作为我单独网页上脚本标记中的源，然后Vue应用程序将存在于该网页上

（我也会在页面上加载css文件，但目前我并不担心这一点。）

在尝试将3个js文件注入脚本标记（作为src）后，我看到js文件确实作为源文件存在于页面上，但似乎Vue应用程序从未“执行”，页面上也不存在Vue应用程序中的DOM元素

我还通过页面上的脚本标记加载了vue.js（开发版本）js文件

我对web pack不是非常熟悉，但我怀疑需要执行web pack才能在这个单独的网页中运行Vue应用程序，因为web pack是用来在本地单独运行Vue应用程序的

我不确定这是否可行，但我无法找到任何资源来证明我正在努力实现的目标

请提供任何相关的帮助或信息，以及这是否是在第三方网页中运行Vue应用程序的正确方法

编辑

这是用于插入带有文件src的脚本标记的js代码：

var head = document.getElementsByTagName('head')[0];
var js = document.createElement("script");
js.src = "/js/app.js";
head.appendChild(js);

---

我将此代码用于每个文件（应用程序、清单和供应商）。这就是我所做的一切，脚本标记存在于页面上，并且具有正确的源代码。在我的Chrome调试器的sources选项卡下，我看到所有三个js文件都已正确加载。

您不需要在index.html中引用vue。它应该在供应商包中。尝试使用生成index.html

您是否通过使用webpack？这些应该可以帮助你避开这类问题

---

我不想引用Vue index.html文件中的Vue js文件，我想在单独的网站中使用Vue js文件（通过脚本标记加载）。当我在自己的环境中本地运行Vue应用程序时，它会按预期工作。我正在通过vue cli使用官方网页包。我不确定是否可以通过js脚本标签在单独的网站中使用Vue应用程序，但我正在寻找一个可能的解决方案

不，这是不可能的，至少在你预期的工作方式上是不可能的。但是，没有什么可以阻止您将Vue.js中构建的站点嵌入到另一个网站的

中。

解决方案

Vue应用程序未在我的其他应用程序中“加载”的原因是Vue js文件需要一个id=“app”的div元素才能“加载”到。下面是我想将Vue应用加载到的应用中的js文件中使用的代码（带有一些替换的通用值）：

  var head = document.getElementsByTagName('head')[0];
  var body = document.getElementsByTagName('body')[0];

  var div = document.createElement("div");
  div.id = "app"
  body.appendChild(div)

  var js = document.createElement("script");
  js.src = "/js/vue-app.js";
  js.id = "vue-app-js";
  js.defer = true;
  js.async = true;
  head.appendChild(js);

  var css = document.createElement('link');
  css.id = "vue-app-css";
  css.rel = "stylesheet";
  css.type = "text/css";
  css.href = "app.css";
  head.appendChild(css); 

---

为了便于参考，我将所有已编译的Vue js文件（清单、供应商和应用程序）合并到一个名为Vue-app.js的文件中，您可以在上面的代码中看到该文件。一旦Vue js文件加载到页面上，他们将在div中使用id=“app”构建Vue js应用程序。

Cal的方法在vue3中运行良好，下面是我用来加载多个文件的版本-app.js、区块供应商、一些异步区块

  // Simple inline function to add a script to DOM with the right attrs
  const addScript = src => {
    const element = document.createElement("script");
    element.src = src;
    element.defer = true;
    element.async = true;
    document.body.appendChild(element); // Just to match the prod built index.html
  };

  // First make our div with the id that matches our main.js/main.ts
  // This is customizable
  const wrapper = document.createElement("div");
  wrapper.id = "app";

  // Now call addScript once for every script url in array
  // I haven't defined the array in this snippet but its just
  // An array of strings, each being one script URL
  scriptUrls.map(addScript);

---

我没有使用样式，但Cal的样式解决方案应该可以正常工作。

您应该提供一些代码片段，以便我们更好地了解您正在尝试做什么，以及您是否遇到了无关的问题。这是否起作用，然后中断，还是从未起作用？这从未起作用。我正在进行更多的实验，并试图找到一种解决方案，通过脚本标记在单独的网页中实现Vue应用程序。我不想引用Vue index.html文件中的Vue js文件，我想在单独的网站中使用Vue js文件（通过脚本标记加载）。当我在自己的环境中本地运行Vue应用程序时，它会按预期工作。我正在通过vue cli使用官方网页包。我不确定是否可以通过js脚本标记在单独的网站中使用Vue应用程序，但我正在寻找一个可能的解决方案。这很重要吗，因为它发生在加载DOM后，Vue需要锁定一些东西？您最终是如何决定捆绑您的文件的？是否可以将小型vue.js应用程序嵌入vue.js站点？你试过了吗？