Laravel Mix Vue, Ленивый загрузочный компонент возвращает ошибку как неизвестный пользовательский элемент при использовании Vue Router - PullRequest
Новая
       14

Laravel Mix Vue, Ленивый загрузочный компонент возвращает ошибку как неизвестный пользовательский элемент при использовании Vue Router

0 голосов
/ 29 августа 2018

У меня свежая установка Laravel Mix, и я пытаюсь настроить отложенную загрузку компонентов в проекте. У меня есть правильная настройка с помощью плагина babel 'syntax-dynamic-import', поэтому оператор импорта в app.js работает как положено. Проблема возникает, когда я пытаюсь использовать ленивый загруженный компонент с vue-router.

Мой файл app.js выглядит так: 

require('./bootstrap');

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const EC = () => import(/* webpackChunkName: "example-component" */ './components/ExampleComponent.vue');

const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', component: EC }
    ]
});

const app = new Vue({
    router,
    el: '#app'
});

и мой файл welcome.blade.php выглядит так: 

<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Laravel</title>

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

    <base href="/" />
</head>
<body>
<div id="app">
    <h1>Base title</h1>
    <example-component></example-component>
</div>

<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

Так что я просто пытаюсь приземлиться на корневой маршрут и отобразить пример компонента. Пример компонента включен в файл welcome.blade.php.

Я получаю эту ошибку в консоли: 

[Vue warn]: Unknown custom element: <example-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)

Я думаю, что упускаю что-то простое, любой совет приветствуется.

Ответы [ 2 ]

0 голосов
/ 30 августа 2018

@ Erubiel ответ сработал, но он все еще был не той установкой, которую я хотел. Поскольку я пытаюсь использовать vue-router, мне нужно было обновить представление, удалив явный вызов компонента и добавив тег в файл welcome.blade.php. Теперь это означает, что мои маршруты вводятся в это пространство. Обновленная область: 

...
<body>
<div id="app">
    <router-view></router-view>
</div>

<script src="{{ asset('js/app.js') }}"></script>
</body>
...
0 голосов
/ 30 августа 2018

Во-первых, я думаю, вы смешиваете концепции маршрутов с основными компонентами и концепциями vue ...

Попробуйте загрузить компонент прямо в ваше приложение vue ... 

const app = new Vue({
    router,
    el: '#app',
    components: {
        'example-component': () => import('./components/ExampleComponent.vue')
    }
});

Загрузка компонента выполняется с <component>

<component v-bind:is="currentTabComponent"></component>

Проверьте документы, для получения дополнительной информации о динамических компонентах: https://vuejs.org/v2/guide/components-dynamic-async.html

...