javascript - 在 Vue.js 单文件组件中将模板作为外部 HTML 文件导入

我正在做一个 Vuejs 项目，在单文件组件中使用 vue-property-decorator，我希望能够从外部 HTML（或不同的）文件导入模板。我似乎找不到任何解决方案，并且想知道这是否甚至可能。

理想情况下，我想像这样导入模板：

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component({
  template: "Header.html"
})
export default class App extends Vue {
  @Prop()
  public msg!: string;
  private test: string = "(green)";
  private classAdded: boolean = false;

  private addClass() {
    this.classAdded = !this.classAdded;
  }
}
</script>

<style lang="scss">
@import "./Header.scss";
</style>

但是随后我的控制台输出了这个：

[Vue warn]: Error compiling template:

Component template requires a root element, rather than just text.

1  |  Header.html
   |  ^^^^^^^^^^^

found in

---> <App> at src/components/Header/Header.vue
       <App> at src/App.vue
         <Root>

我该如何调查这个问题？

答案＃1

找到了！不是以理想的方式，但对我来说有效！结果你可以给你的 <template></template> 添加一个 src 属性作为对 HTML 的引用。就我而言：<template src="./Header.html"></template>

谢谢你的思考和建议！