Не удалось разрешить динамический импортированный компонент vue - PullRequest
Новая
       15

Не удалось разрешить динамический импортированный компонент vue

0 голосов
/ 27 апреля 2018

Когда я пытаюсь импортировать динамический компонент с помощью функции import (), я получаю следующую ошибку: 

[Vue warn]: Failed to resolve async component: function () {
    return __webpack_require__("./src/components/types lazy recursive ^\\.\\/field\\-.*$")("./field-" + _this.type);
}
Reason: Error: Loading chunk 0 failed.

К сожалению, я не знаю, что вызывает эту ошибку. Я уже пытался установить для esModule значение false в конфигурации vue-loader из-за замечаний к выпуску .

Я использовал vue-cli 2.9.2 с шаблоном веб-пакета для настройки этого проекта, и это код самого компонента: 

<template>
    <div>
        <component :is="fieldType">
            <children/>
        </component>
    </div>
</template>

<script>
export default {
    name: 'DynamicComponent',
    props: {
        type: String,
    },
    computed: {
        fieldType () {
            return () => import(`./types/type-${this.type}`)
        }
    }
}
</script>


[РЕШЕНО]
Код выше работает. Проблема была основана на Loading chunk 0 failed из-за крайнего случая. С настройкой webpack output: {publicPath: '/'} он доставляет порции относительно корня, а не его источника. Когда я вставил http://localhost:8080/app.js в свой внешний сервер и вызвал оттуда функцию импорта, URL-адрес связанного чанка был http://myserver.com/0.js вместо http://localhost:8080/0.js.. Чтобы исправить это, я должен был установить output: {publicPath: 'http://localhost:8080/'} в конфигурации веб-пакета.

1 Ответ

0 голосов
/ 27 апреля 2018

Основная причина - import() - асинхронная (она возвращает Обещание ), о которой вы уже сообщили об ошибке:

[Vue warn]: не удалось разрешить асинхронный компонент

Использование часов будет лучше, как показано ниже, в демоверсии (Внутри Promise.then(), измените componentType), затем подключите beforeMount или смонтируйте, чтобы убедиться, что props = type правильно инициализирован .:

<template>
    <div>
        <component :is="componentType">
            <children/>
        </component>
    </div>
</template>

<script>
import DefaultComponent from './DefaultComponent'

export default {
    name: 'DynamicComponent',
    components: {
        DefaultComponent
    },
    props: {
        type: String,
    },
    data: {
        componentType: 'DefaultComponent'
    },
    watch: {
        type: function (newValue) {
            import(`./types/type-${newValue}`).then(loadedComponent => { this.componentType = loadedComponent} )
        }
    },
    mounted: function () {
        import(`./types/type-${this.type}`).then(loadedComponent => { this.componentType = loadedComponent} )
    }
}
</script>
...