Créez une erreur dans Vue.js pour un composant qui n'existe pas.

Question

Lorsque nous essayons d'utiliser un composant qui n'existe pas, je souhaite qu'une erreur soit générée au lieu d'un simple avertissement dans la console :

[Vue warn] : échec de la résolution du composant : composant non existant
S'il s'agit d'un élément personnalisé natif, assurez-vous de l'exclure de la résolution des composants via compilerOptions.isCustomElement.
  à <MainLayout onVnodeUnmount=fn<onVnodeUnmount>
  à <RouterView>
  à <App>

Parfois, les gens interrompent le flux, mais ils ne le remarquent pas car le composant n'apparaît pas du tout. Existe-t-il un moyen de résoudre ce problème ?

Answer 1

Il est très simple de résoudre ce problème en utilisant le plugin Rollup. Les plug-ins peuvent être écrits directement dans vite.config.js. Ici, vous pouvez utiliser le hook solveId de rollup. Vite/Rollup appelle ce hook lorsqu'il ne peut pas résoudre une importation. S'il s'agit d'un composant Vue Single File (SFC), vous pouvez le résoudre en n'importe quel composant d'espace réservé de votre choix :

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))
        }
    }
})

Traduisez src/components/Placeholder.vue (si vous voulez qu'il soit vide, faites ceci) :

<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>