奇怪的错误，当运行一个简单的vue.js应用程序

Question

我使用vue.js 2.x，并使用webpack设置一个简单的应用程序。

当我开始在开发模式下的应用程序，我得到的铬控制台这个错误，并没有什么在页面上显示：

Uncaught TypeError: _vm._m is not a function(…)

存在服务器（没有的WebPack错误）上没有错误。

Routes.js

import Home from './components/Home.vue'; 
import Portfolio from './components/portfolio/Portfolio.vue'; 
import Stocks from './components/stocks/Stocks.vue'; 

export const routes = [{ 
    path: '/', 
    components: Home 
}, { 
    path: '/portfolio', 
    components: Portfolio 
}, { 
    path: '/stocks', 
    components: Stocks 
}] 

main.js

import Vue from 'vue' 
import VueRouter from 'vue-router' 
import App from './App.vue' 
import { routes } from './routes' 

Vue.use(VueRouter); 

const router = new VueRouter({ 
    mode: 'history', 
    routes 
}); 

new Vue({ 
    el: '#app', 
    router, 
    render: h => h(App) 
}) 

App.vue

<template> 
    <div class="container"> 
     <router-view></router-view> 
    </div> 
</template> 
<script> 

    export default { 

    } 
</script> 
<style> 

</style> 

ħ ome.vue

<template> 
    <h1>The home component</h1> 
</template> 

任何想法是什么原因造成的？

Answer 1

所以，像往常一样，这是一个愚蠢的错误，我的路线定义了一个错字， 我用components代替component：

export const routes = [{ 
    path: '/', 
    //should be component 
    components: Home 
} 

Answer 2

我可能会试图在测试时尝试在Vue实例上使用render。

你应该有一个像index.html根文件，你的应用程序创建一个容器，并调用应用程序组件：

#index.html 
<div id="my-vue-app"> 
    <app></app> 
</div> 

然后编辑main.js，免去您初始化具有以下的Vue的实例的方式：

new Vue({ 
    components: { 
    App 
    }, 
    router 
}).$mount('#my-vue-app')