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

新手上路,请多包涵

我正在学习将 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 运行应用程序 browserSyncnpm run watch 。它与错误有什么关系吗?

原文由 psudo 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 1k
2 个回答

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

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

原文由 CodeBoyCode 发布,翻译遵循 CC BY-SA 4.0 许可协议

虽然不适用于此问题的具体细节,但在无法将 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

原文由 Will Palmer 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题