Vue组件无法识别？非常基本的设置。 “header”组件已注册但未使用 vue/no-unused-components答案

【问题标题】：Vue component not recognised? Very basic setup. The "header" component has been registered but not used vue/no-unused-componentsVue组件无法识别？非常基本的设置。 “header”组件已注册但未使用 vue/no-unused-components
【发布时间】：2023-11-22 13:20:01
【问题描述】：

我正在尝试识别此标头组件，但它没有。我已经尝试将 eslint 设置为严格，并且弄乱我的语法无济于事。我不明白，这应该很简单。任何帮助将不胜感激。

App.vue

<template>
  <div class="container">
    <header />
  </div>
</template>

<script>
import header from './components/header'

export default {
  name: 'App',
  components: {
    header,
  }
}
</script>

<style>

</style>

main.js

 import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

header.vue

<template>
    <header>
        <h1>Component header</h1>
    </header>

</template>

<script>
export default {
    name: 'header',
};
</script>

<style>
    header {
      display: flex;
    }
</style>

任何帮助都会很棒。谢谢。

【问题讨论】：

我认为main.js没有导入到index.html中。
嘿，将其导入 head 标签有效！是否应该将其导入标题中？因为现在错误消失了，但是标题内容仍然没有显示，但是现在显示了标题样式（flex属性）。
见下面的答案...

标签： javascript vue.js vuejs3

【解决方案1】：

main.js需要导入index.html：

  <body>
    <div id="app"></div>
    <script type="module" src="/src/js/main.js"></script>
  </body>

（使用正确的路径）

最好将标题组件重命名为另一个单词，因为<header> 在html 中用作标准标记名称

【讨论】：

此错误显示：无法加载模块脚本：需要一个 JavaScript 模块脚本，但服务器以“text/html”的 MIME 类型响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。
您使用webpack 或vite 作为捆绑器吗？不能将 Vue 组件直接放在服务器上...
他显然在使用 Webpack（HTML 中的htmlWebpackPlugin）。所以不需要更改index.html。问题确实出在组件的名称上 - [Vue warn]: Do not use built-in or reserved HTML elements as component id: header
就是这样！太感谢了！我没有收到那个 vue 警告。
我明白了，谢谢。忽略了 WebPack 插件...