使用 Axios 将整个 HTML 项目加载到 VueJS 组件中

Posted 2023-02-23

【中文标题】使用 Axios 将整个 HTML 项目加载到 VueJS 组件中

【英文标题】：Load an entire HTML project into VueJS component with Axios

【发布时间】：2021-08-16 02:43:03

【问题描述】：

我正在处理一个需要在我的 Rails / Vue 项目中呈现的 3D Vista tour web 存储库。 这是从 3D vista 导出的所有文件。呈现虚拟之旅的唯一方法是将这些文件上传到服务器上。

我在这里要做的是在我的 Vue 模板中呈现该项目。 （这是一个 Rails / VueJS 应用项目）

这是我的 Vue 文件中的内容：

 <template>
    <div id="vr-frame" v-html="compiledHtml"> </div>
</template>

<script>
import axios from 'axios';

export default 
    name: 'vr',
    data() 
        return 
        fileName: "index.htm",
        input: ""
        ;
    ,
    computed: 
        compiledHtml() 
        return this.input;
        
    ,
    methods: 
        loadFile() 
        axios(
            method: "get",
            url: "../../assets/tours/v1/" + this.fileName
        )
            .then(result => 
            this.input = result.data;
            )
            .catch(error => 
            console.error("error getting file");
            );
        
    ,


</script>

我仍然不知道这实际上是否可行，到目前为止我不知道它似乎也不起作用。

将外部 Web 项目加载并呈现到 VueJS 模板中的正确方法是什么？API 是否适合这种情况？

谢谢

【参考方案1】：

您将无法使用v-html 执行此操作，因为您正在尝试加载整个 html 页面而不仅仅是一些 html 内容。相反，请尝试使用带有 srcdoc 属性的 iframe：

<template>
  <iframe :srcdoc="compiledHtml" :src="fileName"></iframe>
</template>

<script>
import axios from 'axios';

export default 
    name: 'vr',
    data() 
      return 
        fileName: "index.htm",
        compiledHTML: ""
      ;
    ,
    methods: 
      loadFile() 
          axios(
            method: "get",
            url: "../../assets/tours/v1/" + this.fileName
          )
            .then(result => 
              this.compiledHTML = result.data;
            )
            .catch(error => 
              console.error("error getting file");
            );
        
    ,


</script>

【讨论】：

谢谢 Chase，我现在可以看到渲染的东西了。它没有找到文件的路径。如何使用相对路径而不从 rails 获取路径错误？

@RomainBOBOE 如果您使用的是 webpack，我会尝试在组件中导入文件，然后使用导入的值。你必须在你的 webpack 构建过程中添加一个文件加载器来处理这个问题。

但是使用srcdoc 属性你应该能够传入一个字符串。它只需要src 作为后备属性，因此只有在您的用户使用 IE 时才需要它