为何Vue3+Vite仅支持短横线组件标签，而Vue CLI支持大驼峰？

核心问题所在 #

你在vite.config.js里的配置犯了关键错误：把MyContent标记成了自定义元素，而非Vue组件。

看这段配置代码：

vue({
    template: {
        compilerOptions: {
            isCustomElement: (tag) => ["MyContent"].includes(tag),
        },
    },
}),

当Vue模板编译器识别到<MyContent/>标签时，因为你将它加入了isCustomElement的判断列表，会判定这是原生自定义元素（比如Web Component），而非你注册的Vue组件，自然不会解析渲染该组件内容。

而改成<my-content/>时，这个标签不在isCustomElement列表内，编译器才会将其识别为你注册的Vue组件（Vue会自动把短横线命名的标签映射到大驼峰组件名）。

和Vue3 CLI项目的差异 #

Vue3 CLI的默认配置里，不会主动将任何组件名加入isCustomElement列表。当你在模板中写<HelloWorld/>时，编译器会正常识别这是你注册的Vue组件，没有被标记为自定义元素，因此能正常渲染。

解决方法 #

直接删除vite.config.js里isCustomElement配置中的["MyContent"]部分，或者移除整个isCustomElement判断（除非你确实需要使用原生自定义元素）：

修改后的vite.config.js：

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
    plugins: [
        vue(),
        laravel(["resources/css/app.css", "resources/js/app.js"]),
    ],
});

修改后<MyContent/>标签就能正常识别并渲染对应的Vue组件。

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