Buat ralat dalam Vue.js untuk komponen yang tidak wujud.

Question

Apabila kami cuba menggunakan komponen yang tidak wujud, saya mahu ralat dijana dan bukannya amaran mudah dalam konsol:

[Vue warn]: Gagal menyelesaikan komponen: nonexisting-component
Jika ini ialah elemen tersuai asli, pastikan untuk mengecualikannya daripada peleraian komponen melalui compilerOptions.isCustomElement.
  di <Layout Utama onVnodeUnmounted=fn<onVnodeUnmounted>
  di <RouterView>
  di <App>

Kadang-kadang orang memecahkan aliran, tetapi mereka mungkin tidak perasan kerana komponen itu tidak muncul langsung. Adakah terdapat cara untuk menyelesaikan masalah ini?

Answer 1

Sangat mudah untuk menyelesaikan masalah ini menggunakan pemalam Rollup. Pemalam boleh ditulis terus dalam vite.config.js. Di sini anda boleh menggunakan cangkuk resolveId rollup. Vite/Rollup memanggil cangkuk ini apabila ia tidak dapat menyelesaikan import. Jika ia adalah Komponen Fail Tunggal (SFC) Vue, anda boleh menyelesaikannya kepada mana-mana komponen pemegang tempat pilihan anda:

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

Terjemah src/components/Placeholder.vue (jika anda mahu ia kosong, cuma lakukan ini):

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