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

【问题标题】：Vue.js Failed to mount component: template or render function not definedVue.js 无法挂载组件：未定义模板或渲染函数
【发布时间】：2019-07-02 19:31:18
【问题描述】：

我正在从 series 学习将 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的代码sn-p：

<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布局中的代码sn-p：

//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 运行应用程序。和错误有关系吗？

【问题讨论】：

标签： javascript laravel vue.js

【解决方案1】：

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

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

【讨论】：

谢谢。有效。你能帮我理解你建议的代码刚刚做了什么吗？
不用担心！很高兴帮助:) - 你也可以做组件：() => import('../components/Test.vue') 我相信:)
我不确定 100% 为什么没有它它就无法工作，只是它与异步组件有关 - 你能否将我的答案标记为正确：)

【解决方案2】：

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

代替

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

你应该使用

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

关键是组件属性也将接受一个函数，并且在该函数中，您可以返回一个导入的组件，该组件仅在需要时才被调用。如果直接给require()，则立即导入。

【讨论】：

【解决方案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
});

【讨论】：

【解决方案4】：

虽然不适用于此问题的具体内容，但如果未能将 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

【讨论】：