小编Cal*_*pik的帖子

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

我想通过脚本标签将 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"; …
Run Code Online (Sandbox Code Playgroud)

javascript webpack vue.js

2
推荐指数
1
解决办法
2445
查看次数

标签 统计

javascript ×1

vue.js ×1

webpack ×1