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

我正在处理一个需要在Rails/Vue项目中渲染的3D Vista tour web存储库。 以下是从3D vista导出的所有文件。渲染虚拟漫游的唯一方法是将这些文件上载到服务器上

我在这里试图做的是在我的Vue模板中呈现该项目。（这是一条铁轨/ 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>

从“axios”导入axios；
导出默认值{
名称：“vr”，
数据（）{
返回{
文件名：“index.htm”，
输入：“”
};
},
计算：{
compiledHtml（）{
返回此.input；
}
},
方法：{
加载文件（）{
axios({
方法：“获取”，
url:“../../assets/tours/v1/”+this.fileName
})
。然后（结果=>{
this.input=result.data；
})
.catch（错误=>{
错误（“获取文件时出错”）；
});
}
},
}

我仍然不知道这是否是可能的，到目前为止我不知道这似乎也不起作用

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

---

谢谢

您将无法使用

v-html

执行此操作，因为您正在尝试加载整个html页面，而不仅仅是一些html内容。相反，请尝试使用以下属性使用iframe：

从“axios”导入axios；
导出默认值{
名称：“vr”，
数据（）{
返回{
文件名：“index.htm”，
编译的HTML:“
};
},
方法：{
加载文件（）{
axios({
方法：“获取”，
url:“../../assets/tours/v1/”+this.fileName
})
。然后（结果=>{
this.compiledHTML=result.data；
})
.catch（错误=>{
错误（“获取文件时出错”）；
});
}
},
}

谢谢Chase，我现在可以看到渲染的内容了。它找不到文件的路径。如何使用相对路径而不从rails获取路由错误？@RomainBOBOE如果您使用的是webpack，我会尝试在您的组件中导入文件，然后使用导入的值。不过，您必须将文件加载器添加到Web包构建过程中才能处理该问题。但是使用

srcdoc

属性，您应该能够传入字符串。它只需要

src

作为回退属性，因此您仅在用户使用IE时才需要它