Laravel10+Vue3+Vite4+Inertia下i:pgfRef组件解析失败求助

错误信息 #

runtime-core.esm-bundler.js:41 [Vue warn]: Failed to resolve component: i:pgfRef
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <ApplicationLogo class="block h-9 w-auto fill-current text-gray-800 dark:text-gray-200" > 
  at <Link href="http://127.0.0.1:8000/dashboard" > 
  at <AuthenticatedLayout> 
  at <Dashboard errors= {} ziggy= {url: 'http://127.0.0.1:8000', port: 8000, defaults: Array(0), routes: {…}, location: 'http://127.0.0.1:8000/dashboard'} auth= {user: {…}}  ... > 
  at <Inertia initialPage= {component: 'Dashboard', props: {…}, url: '/dashboard', version: '5dd4e6adde169e0e13de6c61cb4b5165'} initialComponent= {__name: 'Dashboard', __hmrId: '8e8f4dea', __file: '/Users/soeren/Desktop/dg-app/resources/js/Pages/Dashboard.vue', setup: ƒ, render: ƒ, …} resolveComponent=fn<r>  ... > 
  at <App>

问题背景 #

已尝试搜索相关解决方案、撤销最近代码修改均无效，不清楚错误成因，以下是项目相关代码及排查思路：

项目代码 #

App.js #

import './bootstrap';
import '../css/app.css';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

vite.config.js #

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

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        ViteComponents()
    ],
});

Dashboard.vue #

<script setup>
import SearchGoods from '@/Components/SearchGoods.vue';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { Head } from '@inertiajs/vue3';
</script>

<template>
    <Head title="Dashboard" />

    <AuthenticatedLayout>
        <div class="pt-8">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div
                    class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg"
                >
                    <div class="p-6 text-gray-900 dark:text-gray-100">
                        You're logged in!
                    </div>
                </div>
            </div>
        </div>
        <div class="p-6">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div
                    class="overflow-hidden shadow-sm sm:rounded-lg"
                >
                    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
                        
                        <SearchGoods class="min-w-full"></SearchGoods>
                    </div>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>

SearchGoods.vue #

<script setup>

import { ref, onMounted, watchEffect } from 'vue';
import MeiliSearch from 'meilisearch';

const query = ref("");
const client = ref(null);
const results = ref(null);
const selectedHitIndex = ref(0);

onMounted(() => {
    client.value = new MeiliSearch({ host: 'http://localhost:7700' });
});

const search = async (query) => {
    if (query) {
        results.value = await client.value.index('numbers').search(query);
        console.log(results.value);
    }
}

watchEffect(() => {
    search(query.value);
})

</script>

<template>
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div
            class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg"
        >
            <div class="p-6 text-gray-900 dark:text-gray-100">
                <h1>Search</h1>
                <form action="#" method="get">
                    <input
                        class="block w-full border-none rounded"
                        placeholder="Search..."
                        type="search"
                        v-model="query"
                        
                    />
                    <button class="mt-2 p-2 rounded bg-black text-white">
                        Search
                    </button>
                </form>
            </div>
        </div>
    </div>
</template>

排查解决思路 #

• 定位i:pgfRef来源：错误栈指向ApplicationLogo组件，先检查resources/js/Components/ApplicationLogo.vue的代码，看是否存在i:pgfRef标签——可能是SVG复制时带入的命名空间标签，或是拼写错误的组件名。
• 配置Vue忽略自定义元素：如果i:pgfRef是原生自定义元素，修改vite.config.js中的Vue插件配置，添加自定义元素排除规则：

  vue({
    template: {
      transformAssetUrls: {
        base: null,
        includeAbsolute: false,
      },
      compilerOptions: {
        // 排除所有i:开头的标签，避免Vue尝试解析为组件
        isCustomElement: (tag) => tag.startsWith('i:')
      }
    },
  }),
  

• 排查自动引入插件冲突：你使用了ViteComponents自动引入组件，尝试暂时注释该插件，重启服务看错误是否消失——该插件可能误将i:pgfRef识别为需要自动引入的组件。
• 检查默认组件完整性：ApplicationLogo是Laravel默认组件，确认该文件未被篡改，SVG代码中没有异常标签。

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