Laravel - [Vue warn]: не удалось смонтировать компонент: шаблон или функция визуализации не определены - PullRequest
Новая
       12

Laravel - [Vue warn]: не удалось смонтировать компонент: шаблон или функция визуализации не определены

0 голосов
/ 09 апреля 2019

Итак, я создаю свой первый SPA в Laravel вместе с VUE. Я решил использовать микс Laravel вместо веб-пакета, и он, кажется, сломался для меня, теперь я получаю

[Vue warn]: Failed to mount component: template or render function not defined.

Кажется, что происходит, когда я добавляю <router-view></router-view>.

Я пробовал «решение» добавления .default, не сработало. 

export default new VueRouter({
    routes: [
        {
            path: '/',
            component: require('./views/Home.vue').default
        },
        {
            path: '/about',
            component: require('./views/About.vue').default
        }
    ]
});

app.js: 

import './bootstrap';
import router from './routes';

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

bootstrap.js: 

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


window.Vue = Vue;
Vue.use(VueRouter);

window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

routes.js: 

import VueRouter from 'vue-router';

export default new VueRouter({
    routes: [
        {
            path: '/',
            component: require('./views/Home.vue')
        }
    ]
});

HTML (welcome.blade.php): 

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <link rel="stylesheet" href="/css/app.css" type="text/css">
    </head>
    <body>
        <div id="app">
            <router-link to="/">Home</router-link>

            <router-view></router-view>
        </div>
        <script src="/js/app.js"></script>
    </body>
</html>

1 Ответ

0 голосов
/ 09 апреля 2019

Из bootstrap.js удалите import VueRouter from 'vue-router'; и Vue.use(VueRouter); и добавьте плагин Router в Vue внутри файла rout.js и отредактируйте его следующим образом: 

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

Vue.use(VueRouter);
export default new VueRouter({
    routes: [
        {
            path: '/',
            component: require('./views/Home.vue')
        }
    ]
});

app.js правильно.Я реализовал и проверил это все работает как ожидалось.

...