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

Question

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

目前，在我的 Vue 应用程序中运行 npm run build 后，我得到了 7 个已编译的文件:

1. app.js
2. app.js.map
3. manifest.js
4. manifest.js.map
5. vendor .js
6. vendor .js.map
7. app.css

我认为我可以加载这 3 个 js 文件( list 、 vendor 和应用程序 - 不包括 map 文件)作为我单独网页上脚本标记中的源，然后 Vue 应用程序将存在于该网页上。

(我还会在页面上加载 css 文件，但目前我并不担心。)

尝试在脚本标签中注入(inject) 3 个 js 文件(作为 src)后，我看到 js 文件确实作为源存在于页面上，但 Vue 应用程序似乎从未“执行过”，并且没有来自 DOM 元素Vue 应用程序存在于页面上。

我还通过页面上的脚本标签加载了 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);

我对每个文件(应用程序、 list 和 vendor )都使用此代码。这就是我所做的一切，脚本标签存在于具有正确来源的页面上。在 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 文件( list 、 vendor 和应用程序)合并到一个名为 vue-app.js 的文件中，您可以在上面的代码中看到该文件。一旦 Vue js 文件加载到页面上，它们就会在 id = "app"的 div 中构建 Vue js 应用程序。