非Vue CLI环境下，Vue如何将组件模板代码拆分到单独文件？

我太懂这种困扰了——模板代码越写越长，堆在JS里看着就头疼，想拆分又没Vue CLI的构建工具加持，之前用require('./components/header.html')不行是因为浏览器根本不认识Node.js的这个语法呀！给你几个纯前端就能实现的靠谱方案：

方案1：用Vue官方支持的<script type="text/x-template">标签 #

这是最简单直接的方案，不需要任何额外工具，Vue原生就支持：

1. 在你的主HTML文件里，把组件模板单独放到一个<script>标签中，指定type="text/x-template"并给它一个唯一ID：

<!-- 主HTML文件中 -->
<script type="text/x-template" id="header-template">
  <header class="app-header">
    <h1>{{ pageTitle }}</h1>
    <nav>
      <a href="/" v-bind:class="{ active: currentPage === 'home' }">首页</a>
      <a href="/about" v-bind:class="{ active: currentPage === 'about' }">关于</a>
    </nav>
  </header>
</script>

2. 然后在你的JS代码中，引用这个ID来注册组件：

Vue.component('header-app', {
  template: '#header-template',
  data() {
    return {
      pageTitle: '我的Vue应用',
      currentPage: 'home'
    }
  }
})

// 正常初始化Vue实例
new Vue({
  el: '#app'
})

这个方案的好处是零配置，模板和HTML放在一起但又通过type区分，不会被浏览器直接解析，Vue能准确识别。

方案2：用Fetch加载外部HTML模板文件 #

如果你想把模板完全放到单独的.html文件里，可以用浏览器原生的fetch API来加载：

1. 新建components/header.html文件，里面只放纯模板代码：

<!-- components/header.html -->
<header class="app-header">
  <h1>{{ pageTitle }}</h1>
  <nav>
    <a href="/" v-bind:class="{ active: currentPage === 'home' }">首页</a>
    <a href="/about" v-bind:class="{ active: currentPage === 'about' }">关于</a>
  </nav>
</header>

2. 在JS中通过fetch获取模板内容，再注册组件（注意要在模板加载完成后初始化Vue实例）：

// 先异步加载模板
fetch('./components/header.html')
  .then(response => {
    if (!response.ok) throw new Error('模板加载失败')
    return response.text()
  })
  .then(templateContent => {
    // 模板加载成功后注册组件
    Vue.component('header-app', {
      template: templateContent,
      data() {
        return {
          pageTitle: '我的Vue应用',
          currentPage: 'home'
        }
      }
    })

    // 最后初始化Vue实例，确保组件已注册
    new Vue({
      el: '#app'
    })
  })
  .catch(error => console.error('出错了:', error))

⚠️ 注意：如果是直接打开本地HTML文件（file://协议），fetch可能会因为跨域限制失败，建议用本地服务器（比如http-server，npm全局安装后直接在项目目录运行）来访问你的应用。

方案3：用ES模块导入模板字符串 #

如果你的目标浏览器支持ES模块（现在大部分现代浏览器都支持），可以把模板写成字符串导出，再通过import引入：

1. 新建components/header-template.js文件，把模板写成ES模块导出：

// components/header-template.js
export default `
<header class="app-header">
  <h1>{{ pageTitle }}</h1>
  <nav>
    <a href="/" v-bind:class="{ active: currentPage === 'home' }">首页</a>
    <a href="/about" v-bind:class="{ active: currentPage === 'about' }">关于</a>
  </nav>
</header>
`

2. 在主JS文件中导入模板，注意主JS的<script>标签要加上type="module"：

<!-- 主HTML文件中引入JS -->
<script type="module" src="app.js"></script>

3. app.js中的代码：

// app.js
import headerTemplate from './components/header-template.js'

Vue.component('header-app', {
  template: headerTemplate,
  data() {
    return {
      pageTitle: '我的Vue应用',
      currentPage: 'home'
    }
  }
})

new Vue({
  el: '#app'
})

这个方案能让模板和JS完全分离，结构更清晰，适合追求代码模块化的场景。

内容的提问来源于stack exchange，提问作者artworkjpm