Erstellen Sie einen Fehler in Vue.js für eine Komponente, die nicht vorhanden ist.

Question

Wenn wir versuchen, eine nicht vorhandene Komponente zu verwenden, möchte ich, dass anstelle einer einfachen Warnung in der Konsole ein Fehler generiert wird:

[Vue-Warnung]: Komponente konnte nicht aufgelöst werden: nicht vorhandene Komponente
Wenn es sich um ein natives benutzerdefiniertes Element handelt, schließen Sie es unbedingt über „compilerOptions.isCustomElement“ von der Komponentenauflösung aus.
  at <MainLayout onVnodeUnmounted=fn<onVnodeUnmounted ref=Ref>
  bei <RouterView>
  unter <App>

Manchmal unterbrechen Leute den Fluss, bemerken es aber möglicherweise nicht, weil die Komponente überhaupt nicht angezeigt wird. Gibt es eine Möglichkeit, dieses Problem zu lösen?

Answer 1

使用Rollup插件解决这个问题非常容易。插件可以直接编写在vite.config.js中。在这里，您可以使用rollup的resolveId钩子。当Vite/Rollup无法解析导入时，它会调用此钩子。如果是Vue单文件组件（SFC），您可以将其解析为任何选择的占位符组件：

import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        {
            resolveId(id) {
                if (id.endsWith('.vue')) {
                    // issue the error into the terminal
                    console.error(`Component "${id}" is missing!`);
                    return './src/components/Placeholder.vue';
                }
            },
        }
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})

翻译src/components/Placeholder.vue（如果您希望它为空，只需这样做）：

<script setup>
    console.error('Some component is missing, check the build terminal!');
</script>
<template>
    <div class="background:orange;color:red">Some component is missing, check the build terminal!</div>
</template>