如何将外部 HTML 模板动态导入和解析到 Vue 组件中？

Question

TL;DR：

将骨干网/jquery 应用程序转换为 Vue 3。拥有超过 400 个用于不同视图的 html 模板文件。希望能够以原始格式动态解析这些 html 模板，而无需进行大量重写。还希望能够在 html 中添加对 Vue 组件的模板引用并让 Vue 解析。

原始问题

如何在 Vue 组件中定义外部或动态 HTML 模板（如 MyVueTemplate.html）？ 类似（伪代码）：

export default {
    name: "MyComponent",
    template: import(`@/views/${this.html_id}.html`),
    props: {
        html_id: String,
    },
    components: {
    }
};

一旦成功，我需要能够让 temp.html 包含 Vue 组件的标签，例如 <MyOtherViewComponent variable1="test"></MyOtherViewComponent>，然后由 Vue 解析。

我希望 webpack import() 语句的使用方式与我们当前导入 html 模板的方式相同，但也可以在构建期间解析 Vue 组件引用。但如果需要，运行时编译也可能是一个（不太受欢迎的）选项。

有超过 400 个 html 文件，因此目前手动将它们全部重构为 Vue 组件是不可行的，因此这种方法。使用 Vue 3，但即使是 Vue 2 的解决方案也可以作为更多研究的起点。

希望有人对这个问题有所了解。

---

更新

到目前为止，在旧 html 中包含 Vue 组件的唯一方法似乎是在 html 中包含标签，并使用 createApp().mount() 为每个组件创建单独的 Vue 实例.不理想，但可能是唯一的方法。

Answer 1

您需要 runtime template compiler - 否则，如果您的模板是 Vue 组件，那么您可以按照 https://markus.oberlehner.net/blog/distributed-vue-applications-loading-components-via-http/ 中的说明通过 HTTP 加载它们