Vue.js如何将组件拆分为独立HTML与JS文件并实现跨场景复用？

可实现性说明 #

完全可以将Vue组件拆分为独立的模板、逻辑文件复用，避免index.html冗余，以下提供两种适配不同场景的方案： #

方案1：无构建工具（适配你当前纯HTML开发的需求） #

适合小型项目、不想引入工程化工具的场景，直接引入Vue即可实现：

1. 引入Vue依赖
   在index.html的head部分添加Vue资源引入：

<!-- 自行引入对应版本的Vue资源即可 -->
<script src="vue对应版本的引入地址"></script>

2. 编写通用组件注册函数
   在index.html的script标签中添加如下逻辑，用来加载独立的HTML模板并注册为全局组件：

// 组件注册函数：参数为组件名、模板文件路径、组件配置项
async function registerComponent(componentName, templatePath, options = {}) {
  const templateRes = await fetch(templatePath)
  const templateContent = await templateRes.text()
  app.component(componentName, {
    template: templateContent,
    ...options
  })
}
// 初始化Vue实例
const app = Vue.createApp({})
// 按依赖顺序注册组件（先注册子组件，再注册父组件）
Promise.all([
  registerComponent('tile-body', './tileBody.html'),
  registerComponent('vertical-tile', './verticalTile.html')
]).then(() => {
  // 所有组件注册完成后挂载应用
  app.mount('#app')
})

3. 调整你的组件文件内容
   组件的HTML文件只需要写模板内容，不需要外层包裹组件名标签，示例：
   tileBody.html内容：

<div class="tile-body">
  <tile-info></tile-info>
</div>

verticalTile.html内容：

<div class="vertical-tile">
  <tile-body></tile-body>
</div>

4. 补充说明

• 组件的JS逻辑可以单独抽为同名JS文件，注册组件时传入配置项即可
• 本地开发需要启动本地服务器（比如VS Code的Live Server插件），避免fetch请求跨域
• 模板中组件名建议使用kebab-case格式（如<vertical-tile>），符合Vue规范

方案2：使用构建工具（推荐中长期项目使用） #

如果项目需要长期维护迭代，更推荐使用Vite创建标准Vue项目，原生支持.vue单文件组件，每个组件就是独立的文件，天然支持拆分复用：

1. 项目结构示例：

项目根目录
├── index.html
└── src
    ├── App.vue
    └── components
        ├── VerticalTile.vue
        ├── TileBody.vue
        └── TileInfo.vue

2. 单文件组件示例（VerticalTile.vue）：

<template>
  <div class="vertical-tile">
    <TileBody />
  </div>
</template>
<script setup>
// 引入子组件即可直接使用
import TileBody from './TileBody.vue'
</script>
<style scoped>
/* 组件单独样式，不会污染全局 */
.vertical-tile {
  height: 100%;
}
</style>

3. 优势

• 无需手动处理组件加载注册逻辑，工具自动处理
• 支持组件级别的样式隔离、热更新、打包压缩等工程化能力
• 开发体验和可维护性远高于纯HTML拆分方案

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