Vue 3 - amaran "Tidak dapat menyelesaikan komponen".

Question

Saya menemui amaran ini apabila cuba mengimport komponen daripada fail index.js saya.

Ini ialah folder komponen saya:

components/
|-- index.js
|-- ComponentA.vue
|-- ComponentB.vue
|-- ComponentC.vue

dan index.js:

import ComponentA daripada './ComponentA';
import KomponenB daripada './ComponentB';
import ComponentC daripada './ComponentC';

eksport { ComponentA, ComponentB, ComponentC };

Apabila saya mencuba ini dalam mana-mana komponen (B atau C)

<script>
import { ComponentA } daripada './';

console.log(ComponentA); // tidak ditentukan

eksport lalai {
    komponen: {ComponentA}
}
</script>

Saya mendapat amaran dalam konsol, bagaimanakah saya boleh membetulkannya? Apa salah saya di sini?

Sebenarnya, kaedah ini berfungsi:

import ComponentA daripada './ComponentA';

Tetapi saya tidak mahu menggunakan kaedah ini kerana saya mempunyai banyak komponen dalam folder komponen

Answer 1

Anda hendaklah menulis pernyataan import seperti berikut:

<script>
import { ComponentA } from './components';

export default {
    components: { ComponentA }
}
</script>