javascript - 在 Vuejs 單文件組件中將模板作為外部 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>

感謝你的用心思考！