javascript - 在 Vuejs 单文件组件中将模板导入为外部 HTML 文件

Question

我正在开发一个 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>

我该如何调查这个问题？

Answer 1

找到了!不是以我想要的方式，但它对我有用!结果你可以放一个 src属性给你的 <template></template>作为对 HTML 的引用。就我而言:<template src="./Header.html"></template>

感谢您的思考!