@karpo518

Почему возникает ошибка «Failed to mount component»?

Делаю демо-проект Laravel + vuejs на локальном сервере Apache.

Создал 2 компонента: App и Home. Запускаю yarn run watch и открываю страницу. Получаю пустую страницу

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

found in

---> <App> at resources/assets/js/App.vue
       <Root>

Что за компонент не может смонтироваться и почему, непонятно. Гуглил по ошибке. Находил, что она возникает, если у require() не дописать default. Но я не использую require кроме как в webpack.mix.js. Там у меня вот что:
webpack.mix.js
let mix = require('laravel-mix');

const { VueLoaderPlugin } = require('vue-loader');


mix.webpackConfig({

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
});

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

Пробовал добавлять туда default. Не помогло. В чём причина такой ошибки? Практически весь код скопирован отсюда

/resources/assets/js/App.vue
<template>
    <div class="panel panel-default">
        <div class="panel-heading">
            <nav>
                <ul class="list-inline">
                    <li>
                        <router-link :to="{ name: 'home' }">Home</router-link>
                    </li>
                    <li class="pull-right">
                        <router-link :to="{ name: 'login' }">Login</router-link>
                    </li>                    <li class="pull-right">
                        <router-link :to="{ name: 'register' }">Register</router-link>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="panel-body">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>


/resources/assets/js/components/Home.vue
<template>
    <h1>Laravel 5 Vue SPA Authentication</h1>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

/resources/assets/js/app.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import Home from './components/Home.vue';

Vue.use(VueRouter);

const router = new VueRouter({
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
    ]
});

new Vue({
    el: '#app',
    router: router,
    render: app => app(App)
});

/resources/views/welcome.blade.php
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div id="app"></div>
    </div>
    <script src="/js/app.js"></script>
</body>
</html>
  • Вопрос задан
  • 38 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

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