Vue.js SPA中如何正确引入Header与Footer公共组件？

常见问题点 #

• 路径错误：引入组件时相对路径写错是高频问题。比如App.vue在根目录，Header组件在src/components/Header.vue，引入路径必须是./components/Header.vue（后缀.vue可省略），层级写错会直接导致组件加载失败。
• 未正确注册组件：局部注册时，必须在App.vue的components选项里声明引入的组件；全局注册时要确保在main.js里完成注册，且注册代码在创建Vue实例之前。
• 组件自身模板问题：Vue2要求组件模板必须有单个根元素，如果Header/Footer里直接写多个同级标签，会导致渲染失败；Vue3虽支持多根，但也要确保模板语法无错误（比如无遗漏闭合标签）。
• 组件标签使用错误：在App.vue的template里，要使用正确的组件标签名。比如注册的是Header，可以写<Header />或者<header />（HTML里推荐用短横线分隔的<app-header />，对应组件名AppHeader），标签名写错自然不会显示。

正确引入方法（局部注册，最常用） #

假设代码结构如下：

src/
├── App.vue
└── components/
    ├── Header.vue
    └── Footer.vue

1. 在App.vue中引入并注册组件：

<template>
  <div id="app">
    <app-header></app-header>
    <main>页面主体内容</main>
    <app-footer></app-footer>
  </div>
</template>

<script>
// 引入组件，路径根据实际结构调整
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'

export default {
  name: 'App',
  // 局部注册组件，可设置别名对应template中的标签
  components: {
    AppHeader: Header,
    AppFooter: Footer
  }
}
</script>

2. 检查组件文件（以Header.vue为例）的模板正确性，Vue2示例：

<template>
  <!-- Vue2必须有单个根元素 -->
  <header class="app-header">
    <h1>网站头部</h1>
  </header>
</template>

<script>
export default {
  name: 'Header'
}
</script>

全局注册方式（适合全项目复用的公共组件） #

在main.js中注册后，所有组件可直接使用，无需局部引入：

import Vue from 'vue'
import App from './App.vue'
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'

// 全局注册组件
Vue.component('AppHeader', Header)
Vue.component('AppFooter', Footer)

new Vue({
  render: h => h(App)
}).$mount('#app')

之后在App.vue的template里直接写<app-header>和<app-footer>即可。

额外排查技巧 #

• 打开浏览器开发者工具的控制台，查看报错信息：比如"Cannot find module './components/Header'"指向路径错误，"Failed to mount component"可能是组件模板问题。
• 如果是Vue3，可使用<script setup>语法简化引入，无需手动注册：

<script setup>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
</script>

<template>
  <Header />
  <main>页面内容</main>
  <Footer />
</template>

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