Vue.js组件在Vite+Laravel项目中导入后无法显示求助

核心问题分析 #

1. 错误标记Vue组件为自定义元素：在vite.config.js中，你将MyComponents和Component2配置为自定义元素，这会让Vue把它们当成原生HTML标签处理，而不是编译渲染Vue组件的内部模板，导致组件内容无法显示。
2. 组件未注册：在普通<script>块中导入组件后，没有显式注册组件，Vue无法识别这些标签对应的组件逻辑。

步骤1：修正Vite配置文件 #

修改vite.config.js，移除将Vue组件标记为自定义元素的配置：

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

export default defineConfig({
plugins: [
    vue({
        template: {
          compilerOptions: {
            // 删除或注释掉这一行，仅保留真正的原生自定义元素配置
            // isCustomElement: (tag) => ['MyComponents','Component2'].includes(tag),
          }
        },
        transformAssetUrls: {
            base: null,
            includeAbsolute: false,
        },
      }),
    laravel({
        input: ['resources/css/app.css', 'resources/js/app.js'],
        refresh: true,
    }),
],
resolve: {
    alias: {
        '@': '/resources/js',
        'vue': 'vue/dist/vue.esm-bundler.js'
    },
  },
});

步骤2：正确注册组件（推荐使用<script setup>） #

修改App.js

使用Vue3的<script setup>语法，导入后自动注册组件：

<script setup>
import MyComponents from "../js/components/MyComponents.vue";
import Component2 from "./components/Component2.vue";
</script>
<template>
    <MyComponents/>
    <Component2/>
    <h1>
       view App Components
    </h1>
</template>

如果坚持使用普通<script>，需要显式注册组件：

<script>
import MyComponents from "../js/components/MyComponents.vue";
import Component2 from "./components/Component2.vue";

export default {
    components: {
        MyComponents,
        Component2
    }
}
</script>
<template>
    <MyComponents/>
    <Component2/>
    <h1>
       view App Components
    </h1>
</template>

修改MyComponents.vue

同样注册内部使用的Component2：

<template>
    <h1>What's up!</h1>
    sadsadsadasdas
    <Component2/>
</template>

<script setup>
import Component2 from './Component2.vue';
</script>

原理说明 #

• isCustomElement是用来告诉Vue哪些标签是原生自定义元素（如Web Components），不能用于Vue组件，否则会跳过编译流程。
• <script setup>是Vue3的语法糖，会自动将导入的组件注册到当前组件实例中，无需手动添加到components选项，简化开发流程。

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