奇怪的錯誤，當運行一個簡單的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')