在 Vue 中加载静态 HTML 文件答案

【问题标题】：Load static HTML files in Vue在 Vue 中加载静态 HTML 文件
【发布时间】：2018-12-11 13:21:02
【问题描述】：

我正在尝试在我的 Vue js 应用程序的 div 中加载一个静态 HTML 文件（Jupyter notebook）。

我尝试过<iframe src="/static/product.html">，但这会将 vue 应用程序的主页呈现在 iframe 内。

在 vue 中这样做的正确方法是什么？

【问题讨论】：

看看这篇来自 vue.js 的帖子：Why Vue.js doesn't support templateURL
在这里你可以做你想做的事：vue component。只加载一个静态的html文件有点重，但是组件的方式可以处理很多其他的情况。
@Camille 这是一个 15000 行长的文件，我尝试将其转换为 vue 文件，但它使整个应用程序运行缓慢。
有了我第一条评论中提供的帖子，你应该能够加载一个 html 文件而无需转换为真正的 vue 组件

标签： vue.js

【解决方案1】：

如果尚未完成，请加载 vue 资源插件

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.10/vue-resource.min.js"></script>

在您的应用中，创建一个加载静态原始 html 页面的组件

Vue.component('statichtmlpage', function (resolve, reject) {
    vue.$http.get('your_static_html_page.html', function(data, status, request){
        var parser = new DOMParser();
        var doc = parser.parseFromString(data, "text/html");
        resolve({
            template: doc
        });
    });
});

并在您希望显示页面的位置添加组件标签

<statichtmlpage></statichtmlpage>

【讨论】：

我试过这种方法，用空的 HTML 代替组件标签。这是我的代码：jsfiddle.net/eywraw8t/133660
谢谢，我现在可以让它为 URL 工作了。加载本地文件时遇到问题。 /static/product.html 路径正确，但会导致文档为空。可能是因为当我点击localhost:8080/static/product.html 时，它会重定向到家。我是否正确理解这一点？使用 vue-router 将 url 映射到文件会解决这个问题吗？
你有没有得到那个工作...... vuejs应用程序中的jupyter html文件@NitinLabhishetty
不，必须使用 hack 来解决这个问题。我创建了一个简单的节点服务器来提供静态 html 文件，并在 vuejs 应用程序中使用 iframe 来呈现它们。