将包含 VueJS 的网页导出到本地存储的 HTML 文件答案

【问题标题】：Exporting a webpage containing VueJS to a locally stored HTML file将包含 VueJS 的网页导出到本地存储的 HTML 文件
【发布时间】：2021-03-12 11:16:31
【问题描述】：

用例：我想允许用户下载包含 VueJS 作为 Javascript 框架的网页的静态导出。

我尝试使用 filesaver.js 和 mimetype text/html 的 blob 导出，替换原始主机的相对路径，以便这些有效负载由网络服务器传递：

let host = window.location.origin
let html_string = document.documentElement.outerHTML
html_string = html_string.replace(/\/build\//g, host+'/build/')
var fileblob = new Blob([html_string], { type: 'text/html' })
this.filesaver.saveAs(fileblob, this.title+".html");

但是，结果是一个具有正确样式和应用程序 javascript 的页面，但没有任何交互。调试器未检测到 VueJS，但窗口确实有一个包含 Vue 实例的window.vm。

当我尝试通过浏览器将文件保存为自包含的 html 文件（.mhtml 扩展名）时，会发生相同的行为。包含所有样式和脚本的网页看起来很正常，但没有实际执行 javscript。

我在这里错过了什么？

【问题讨论】：

标签： javascript html vue.js

【解决方案1】：

好的，为后代发布：问题是文件中的组件已经被原始 html 中的 VueJS 模板替换，因此没有安装在下载的静态文件中。

解决方案是在后端（在本例中使用 Laravel render()）函数生成 HTML，并将其流式传输到用户的文件中。然后，该文件确实包含正确的组件，而这些组件又被 VueJS javscript 替换。

【讨论】：