Vue.js 无法挂载组件：未定义模板或渲染函数

Question

我正在学习在本系列中将 Vue.js 与 Laravel 一起使用，叙述者没有收到任何错误，但是当我单击更改路线时遇到了以下错误。

[Vue 警告]：无法挂载组件：未定义模板或渲染函数。

下面的代码来自我的app.js ：

 require('./bootstrap'); window.Vue = require('vue'); import VueRouter from 'vue-router' Vue.use(VueRouter) let routes = [{ path: '/dashboard', component: require('./components/Dashboard.vue') }, { path: '/profile', component: require('./components/Profile.vue') } ] const router = new VueRouter({ routes }) Vue.component('example-component', require('./components/ExampleComponent.vue')); const app = new Vue({ el: '#app', router });

我的Dashboard.vue代码片段：

 <template> <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header">Dashboard Component</div> <div class="card-body"> I'm an example component. </div> </div> </div> </div> </div> </template> <script> export default { mounted() { console.log('Component mounted.') } } </script>

我的master.blade.php布局中的代码片段：

 //sidebar <ul> <li> <router-link to="/dashboard" class="nav-link">Dashboard</li> <li> <router-link to="/profile" class="nav-link">Profile</li> </ul> //content <div class="container-fluid"> <router-view></router-view> </div>

我正在localhost:3000使用browserSync和npm run watch运行应用程序。 它与错误有什么关系吗？

Answer 1

尝试将.default添加到您的组件需要：

let routes = [{
    path: '/dashboard',
    component: require('./components/Dashboard.vue').default
  },
  {
    path: '/profile',
    component: require('./components/Profile.vue').default
  }
]

Answer 2

虽然不适用于此问题的具体内容，但在无法将 HTML 包装在<template> ... </template>标签中时，也会遇到上述错误消息。 这将导致 vue 无法检测模板，因为没有通过标签或对象属性定义。

例如，在Dashboard.vue ，如果要编写（在Dashboard.vue ）：

<!-- EXAMPLE OF INCORRECT SYNTAX: missing <template> tag -->
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Dashboard Component</div>

                <div class="card-body">
                    I'm an example component.
                </div>
            </div>
        </div>
    </div>
</div>

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

而不是：

<template> <!-- NOTE THE <template> tag, here -->
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Dashboard Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template> <!-- NOTE THE </template> tag, here -->

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

会收到错误信息： Vue.js Failed to mount component: template or render function not defined

Answer 3

// 只需添加“import Vue from 'vue'”，组件就会显示出来！

 require('./bootstrap'); window.Vue = require('vue'); import VueRouter from 'vue-router' Vue.use(VueRouter) let routes = [{ path: '/dashboard', component: require('./components/Dashboard.vue') }, { path: '/profile', component: require('./components/Profile.vue') } ] const router = new VueRouter({ routes }) Vue.component('example-component', require('./components/ExampleComponent.vue')); const app = new Vue({ el: '#app', router });

Answer 4

这一直困扰着我，变化很小，我几乎无法在两个不同的路由器文件中注意到它，其中一个有效，一个无效。

代替

let routes = [{
    path: '/dashboard',
    component: require('./components/Dashboard.vue')
  }]

你应该使用

let routes = [{
        path: '/dashboard',
        component:()=> import('./components/Dashboard.vue')
      }]

重点是组件属性也将接受一个函数，在该函数中，您可以返回一个导入的组件，该组件只会在需要时调用。 如果你直接给require() ，它会被立即导入。