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

Question

[Евгений Журов]

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

<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 аналогичный код - работает. Может, кто сталкивался? как решали?

Answer 1

[Антон Антон]

Вроде бы динамический импорт работает только для конкретных папок, так что надо что-то типа

import(`path/to/dynamic/components/${this.component_name}.vue`)

Comments

[Евгений Журов]

Не совсем так. Оказалось, что по умолчанию компонент просто пытается сделать импорт из папки, в которой сам находится. Поэтому пока сделал

import(`../${this.component_path}.vue`).then(x => x.default)

, а в props this.component_path кладу путь на уровне папки вызывающего import компонента.
Вообще так себе решение, конечно, надо все равно подумать, как сделать более универсально.

[Антон Антон]

Евгений Журов, ну, если у шаблонной строки никакого статического начала нет - то логично, что он пойдет от текущей папки. В теории можно алиас использовать (что там в mix, ~ или @) - тогда он вообще все .vue файлы заимпортит