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

Question

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

目前在npm run build我的 Vue 应用程序内部运行后，我得到 7 个编译文件：

1. 应用程序.js
2. app.js.map
3. manifest.js
4. manifest.js.map
5. 供应商.js
6. 供应商.js.map
7. 应用程序.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 调试器的源选项卡下，我看到所有三个 js 文件都被正确加载。

Answer 1

解决方案

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 文件加载到页面上，它们就会在 id = "app" 的 div 中构建 Vue js 应用程序。