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

TL；DR:

将主干/jquery应用程序转换为Vue3。拥有超过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对其进行解析。

我希望webpackimport((语句可以像我们目前导入html模板一样使用，但也可以在构建过程中解析Vue组件引用。但如果需要的话，运行时编译也可能是一个(不太可取的(选项。

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

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

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

您需要运行时模板编译器-否则，如果您的模板是Vue组件，则可以通过HTTP加载它们，如中所述https://markus.oberlehner.net/blog/distributed-vue-applications-loading-components-via-http/