Vue 2.0 路由器视图在 webpack 2 中使用时不起作用答案

【问题标题】：Vue 2.0 router view doesn't work when used in webpack 2Vue 2.0 路由器视图在 webpack 2 中使用时不起作用
【发布时间】：2017-04-27 05:10:27
【问题描述】：

当我单击 foo 时，控制台会按预期打印，但 <router-view> 什么也不渲染。

官方文档仅显示如何在单个 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

【问题讨论】：

嗯，我不明白为什么它不为你渲染。我有一个带有教程的示例项目，向您展示如何在 webpack 中使用它：github.com/prograhammer/example-vue-project
任何控制台错误？您是否尝试使用谷歌浏览器的 vue 开发工具检查您的应用？
@prograhammer @Frank Provost 谢谢。我终于发现在使用 webpack 2 时我必须导入 vue/dist/vue.esm.js 而不是 vue/dist/vue.js。

标签： vue.js vue-router

【解决方案1】：

以防其他人像我一样落入这个陷阱。在你的 webpack 2 配置文件中，添加：

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

【讨论】：