Как динамически загрузить компонент Vue?

Пробую таким образом:

<component :is="componentInstance" />

export default {
    props: {
        component_path: {
            type: String // напр., '@views/Accounts/SectionCreate', в webpack.mix.js есть alias '@views': path.join(__dirname, 'resources/js/views')
        }
    },

    computed: {
        componentInstance() {
            return () => import(`${this.component_path}.vue`)
            // Вариант: return () => import(`${this.component_path}.vue`).then(x => x.default)
        }
    }
}


Получаю ошибку:
[Vue warn]: Failed to resolve async component: function () {
        return __webpack_require__("./resources/js/components lazy recursive ^.*\\.vue$")("".concat(_this.component_path, ".vue")).then(function (x) {
          return x["default"];
        });
      }
Reason: Error: Cannot find module '@views/Accounts/SectionCreate.vue'


Не очень понимаю, откуда в ошибке берется ./resources/js/components, и зачем он вообще пытается лезть в эту папку, т.к. я никаких указаний на это не даю.

В гугле часто встречается рекомендация добавить в webpack.mix.js: mix.webpackConfig.output.publicPath = '/'. Не помогает.

Подозреваю, что дело действительно в конфигурации webpack.mix, поскольку в другом проекте на nodejs аналогичный код - работает. Может, кто сталкивался? как решали?
  • Вопрос задан
  • 216 просмотров
Пригласить эксперта
Ответы на вопрос 1
Fragster
@Fragster
помогло? отметь решением!
Вроде бы динамический импорт работает только для конкретных папок, так что надо что-то типа
import(`path/to/dynamic/components/${this.component_name}.vue`)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы