Невозможно выполнить асинхронную загрузку компонента vue во вложенной папке.

Question

Я использую webpack 1.13 и Vue 2.1

Скажем, структура папок

src__
     |
     page.vue
     views___
             |
             mainViews____
                          |
                          mainContainer.vue

, где в page.vue у меня есть

<template>
    <component v-bind:is='"mainContainer"'></component>
</template>
.
.
.
beforeMount () {
    Vue.component('mainContainer', function (resolve) {
        require(['./views/mainViews/mainContainer'], resolve)
    })
}

Компонентне загружен.

но когда загружаемый компонент является родственным компонентом компонента, из которого он загружен, он работает.

src__
     |
     page.vue
     mainContainer.vue


Vue.component('mainContainer', function (resolve) {
    require(['./mainContainer'], resolve)
})

В консоли или сборке нет ошибок.Наверное, мой вопрос: почему он работает только тогда, когда компонент находится в структуре папок

Answer 1

Вы должны импортировать компонент и зарегистрировать его в page.vue, например:

<script> import MainContainer from "maincontainer's file path"

export default { ... components: { mainContainer: MainContainer } } </script>