単純なvue.jsアプリを実行すると奇妙なエラーが発生する

Question

私はvue.js 2.xを使用しており、webpackを使用して簡単なアプリケーションを設定しています。

私はDEVモードでアプリを起動

、私はクロームコンソールでこのエラーを取得し、何もページに表示されていない：サーバー（無WebPACKのエラー）に誤りがない

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

。

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> 

H ome.vue

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

原因は何ですか？

Answer 1

ので、いつものように、それは愚かな間違いだった、私は私がcomponentの代わりにcomponentsを使用 、ルート定義にタイプミスがあった：

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

Answer 2

私はおそらく、テスト時にVueインスタンスにrenderを使用しようとしています。

あなたのアプリ用のコンテナを作成し、アプリケーションコンポーネントを呼び出すindex.htmlなどのルート・ファイルが必要です：あなたは以下を使用してVueのインスタンスを初期化する方法を置き換え、main.jsを編集すると

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

を：

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