我可以将 x-template 脚本导入 HTML 文件吗？答案

【问题标题】：Can I import x-template script into HTML file?我可以将 x-template 脚本导入 HTML 文件吗？
【发布时间】：2021-03-06 01:39:01
【问题描述】：

默认情况下，x-template（对于 Vue 组件）是这样的

<script type="text/x-template" id="checkbox-template">
  <div class="checkbox-wrapper" @click="check">
    <div :class="{ checkbox: true, checked: checked }"></div>
    <div class="title">{{ title }}</div>
  </div>
</script>

现在我想将一个外部 js 文件链接到它，比如

<script type="text/x-template" id="checkbox-template" src="target.js" />

有可能吗？如果是这样，target.js 的语法是什么？

【问题讨论】：

标签： javascript html vue.js vue-component

【解决方案1】：

不，x-template 必须是本地的。根据MDN，当type 属性不是module 或JavaScript MIME 类型时，<script> 元素的src 属性将被忽略：

嵌入的内容被视为不会被浏览器处理的数据块。开发人员必须使用不是 JavaScript MIME 类型的有效 MIME 类型来表示数据块。 src 属性将被忽略。

一些框架通过其他方式（即templateUrl 等）支持外部模板，但 Vue 不支持。这是 Evan You（Vue 创建者）explanation 的原因：

事实上，如果事情只是在同一个文件中，它会简单得多。两个文件之间来回跳转的上下文切换，实际上让开发体验变差了很多

HTTP 请求的数量可能仍然是影响应用初始加载性能的最关键因素。现在假设您对应用程序中的每个组件都使用 templateURL - 浏览器需要执行数十个 HTTP 请求才能显示任何内容

当然，您可以创建自己的加载器来 AJAX 内容，就像您手动加载任何外部文件一样，不管内容如何，作为字符串。或者您可以使用使用类似加载器的 Vue CLI。

【讨论】：

哦，谢谢?