laravel Vue.js 无法挂载组件：未定义模板或渲染函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54594406/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue.js Failed to mount component: template or render function not defined
提问by Pawan Rai
I'm learning to use Vue.js with Laravel from this seriesthe narrator doesn't get any error but I've encountered the following error while I click to change the route.
我正在学习在本系列中将Vue.js 与 Laravel 一起使用，叙述者没有收到任何错误，但是当我单击更改路线时遇到了以下错误。
[Vue warn]: Failed to mount component: template or render function not defined.
[Vue 警告]：无法挂载组件：未定义模板或渲染函数。
Below code is from my app.js:
下面的代码来自我的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
});Code snippet from my Dashboard.vue:
我的代码片段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>Code snippet from my master.blade.phplayout:
我的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>I'm running app at localhost:3000with browserSyncand npm run watch. Does it has anything to do with error ?
我正在localhost:3000使用browserSync和运行应用程序npm run watch。它与错误有什么关系吗？
回答by CodeBoyCode
Try adding .defaultto your component requires:
尝试添加.default到您的组件需要：
let routes = [{
path: '/dashboard',
component: require('./components/Dashboard.vue').default
},
{
path: '/profile',
component: require('./components/Profile.vue').default
}
]
回答by Will Palmer
While not applicable to the specifics of this question, the error message above can also be encountered when failing to wrap one's HTML in <template>...</template>tags. This would cause vue to not detect a template, as none has been defined via tags or object properties.
虽然不适用于此问题的具体内容，但在无法将 HTML 包装在<template>...</template>标签中时也会遇到上述错误消息。这将导致 vue 无法检测模板，因为没有通过标签或对象属性定义。
For example, within Dashboard.vue, if one were to write (within Dashboard.vue):
例如， inside Dashboard.vue，如果要写 (within 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>
rather than:
而不是：
<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>
one would receive the error message: Vue.js Failed to mount component: template or render function not defined
一个会收到错误信息： Vue.js Failed to mount component: template or render function not defined
