在webpack 2中使用Vue 2.0路由器視圖時不起作用

當我點擊foo時，控制檯會按預期打印，但<router-view>不會顯示任何內容。在webpack 2中使用Vue 2.0路由器視圖時不起作用

官方文檔只顯示如何在單個html文件中使用它，並將javascript代碼直接嵌入其中。我讀過很多例子，但是我無法在webpack中使用它。

或者在webpack中有沒有關於vue 2路由器的例子？

我創建app.vue文件作爲佈局：

<template> 

<div id="app"> 
    <h1>Hello App!</h1> 
    <p> 
    <router-link to="/foo">Go to Foo</router-link> 
    <router-link to="/bar">Go to Bar</router-link> 
    </p> 
    <router-view></router-view> 
</div> 

</template> 

<script> 
export default { 

} 
</script>

和的WebPack項文件：

import Vue from 'vue'; 
import VueRouter from 'vue-router' 
import VueResource from 'vue-resource' 
Vue.use(VueResource) 
Vue.use(VueRouter) 
import appView from 'app.vue' 

const Foo = { template: '<div>foo</div>' , mounted(){console.log(this,'mount foo')}} 
const Bar = { template: '<div>bar</div>' } 
const routes = [ 
    { path: '/foo', component: Foo }, 
    { path: '/bar', component: Bar } 
] 
const router = new VueRouter({ 
    routes 
}) 

new Vue({ 
    router, 
    render (h) { 
     return h(appView); 
    }, 
}).$mount('#app')

HTML文件：

<!DOCTYPE html> 
<html lang='zh'> 
<head> 

</head> 

<body> 

<div id="app"> 

</div> 

<script type="text/javascript" src="/static/bunlde.js"></script> 
</body> 
</html

來源

2017-04-27 tcpiper

嗯，我不明白爲什麼它不是爲您渲染。我有一個教程示例項目，向您展示如何在webpack中使用它：https://github.com/prograhammer/example-vue-project – prograhammer

任何控制檯錯誤？您是否嘗試使用Google Chrome的vue開發工具檢查您的應用程序？ –

@prograhammer @Frank教務長感謝您。我終於發現，當使用webpack 2時，我必須導入'vue/dist/vue.esm.js'而不是'vue/dist/vue.js'。 – tcpiper

萬一別人陷入這個陷阱一樣我。在您的webpack 2配置文件中，添加：

resolve: { 
    alias: { 
    'vue$': 'vue/dist/vue.esm.js' 
    } 
},

來源

2017-04-27 07:44:18 tcpiper

在webpack 2中使用Vue 2.0路由器視圖時不起作用

回答

相關問題