Vue.js 迁移到 2.0 : Failed to mount component: template or render function not defined.(在根实例中找到)

Question

//编辑:我想我已经解决了问题。我需要来自 vue 的独立构建...

我已经将我的 vue.js 1.0 应用程序迁移到 vue.js 2.0(使用迁移助手)。但是这个错误显示在控制台 Failed to mount component: template or render function not defined. (在根实例中找到)。

这是我简化的 main.js:

import Vue from 'vue';
import Router from 'vue-router';

import SiteHeader from './components/Header.vue';
import Content from './components/Content/Content.vue';
import SiteFooter from './components/Footer.vue';

Vue.use(Router);

const router = new Router({
  mode: 'history',
  root: '/',
  routes: [
    { path: '/', component: Content }
  ]
});

new Vue({
  router,

 components: {
    SiteHeader, SiteFooter
  }
}).$mount('body');

Content.vue 是一个带有模板和脚本的普通 vue 文件(这里没有什么特别的)。

我的 ´router-view` 是在 laravel.blade 文件中定义的

 @if(Request::is('login'))
  <login></login>
 @else
  <site-header></site-header>
  <router-view></router-view>
  <site-footer></site-footer>
 @endif

Answer 1

对于初学者，您不能在 Vue 2.0 中挂载到 body 元素。

此外，如错误消息所述，您尚未提供模板或渲染函数。

我假设(因为您没有展示)您直接在 HTML 页面中有模板标记。

这可以工作，但只适用于 Vue 的“独立”版本。但是，Vue的npm包默认导出的是“runtime build”，无法解析这样的模板代码。

更多信息在这里:

https://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build