在Vue.js中建立一個用於不存在元件的錯誤。
P粉765570115
P粉765570115 2023-08-03 17:43:26
0
1
593
<p>當我們嘗試使用一個不存在的元件時,我希望產生一個錯誤,而不是像控制台中的簡單警告:</p> <pre class="brush:php;toolbar:false;">[Vue warn]: Failed to resolve component: nonexisting-component If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at <MainLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView> at <App></pre> <p>有時候人們會破壞流程,但他們可能沒有註意到,因為元件根本不會顯示出來。有沒有辦法解決這個問題? </p>
P粉765570115
P粉765570115

全部回覆(1)
P粉245489391

使用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>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板