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

Posted 2023-02-23

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

【英文标题】：How do you dynamically import & parse an external HTML template into a Vue component?

【发布时间】：2021-08-19 11:54:59

【问题描述】：

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 实例.不理想，但可能是唯一的方法。

【问题讨论】：

我做了一些搜索......也许你可以在这里找到一些想法：medium.com/scrumpy/…

@redfox05 你能和v-html一起工作吗？

@PeterKrebs 谢谢，但遗憾的是我已经尝试过了，它适用于动态加载的组件，但我需要源文件是纯 html 的东西，因为这是我们 400 多个模板的格式:( wittgenstein谢谢，但遗憾的是 v-html 在这里不起作用。"Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates."

【参考方案1】：

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

【讨论】：

运行时并不理想，希望它可以类似于 webpack 如何通过动态导入进行延迟加载，但仍然在构建期间离线编译。但是感谢您在运行时的输入。

我不得不承认我很困惑 - 首先你说你不想想将这些编译为 Vue 组件，现在你说你希望 Webpack 以某种方式 @987654323 @ 他们。这就是 Angular 的工作方式——它在运行时获取 HTML 模板，但这不是 Vue 的工作方式。所以恐怕你将不得不寻找不同的方式来实现你的目标。

按定义模板（不仅仅是 vue 模板）需要编译 - 无论是运行时还是构建时，编译只是识别模板的“动态”部分以便可以呈现它的过程。很多框架不叫它编译，但这只是一个命名的东西。如果您希望在构建时处理您的 html，但在运行时延迟加载，您需要将它们转换为单个文件组件，然后将它们定义为异步组件。 Wepack 将像处理动态导入一样处理这些问题

@IVOGELOV 我完全理解它很难理解，也很难解释。 Webpack 的 import() 函数将所需文件捆绑到代码中，然后在运行时动态获取。但是，它不会解析 Vue 模板代码的 html，这就是我想要的。我会用 TL 更新问题；DR 看看是否有帮助。

@Xinchao 是的，你已经说了很多我想要实现的目标，这很难解释。很高兴模板在构建期间被编译，并且只是在运行时延迟加载，因为它们无论如何都是静态的。但是可以使用 .html 格式的文件来完成，因为将它们全部（400+）转换为 vue 文件是不可行的。 JS 也是完全分离的。