vue 打包的问题

昨天按照教程安装好vue-router模块后，在应用中引入router 发现没有router.map方法，百度后原来是vue2.0里的路由改了

[javascript]  view plain  copy

1. // 1. 定义（路由）组件。  
2. // 可以从其他文件 import 进来  
3. const Foo = { template: '<div>foo</div>' }  
4. const Bar = { template: '<div>bar</div>' }  
5.   
6. // 2. 定义路由  
7. // 每个路由应该映射一个组件。 其中"component" 可以是  
8. // 通过 Vue.extend() 创建的组件构造器，  
9. // 或者，只是一个组件配置对象。  
10. // 我们晚点再讨论嵌套路由。  
11. const routes = [  
12.   { path: '/foo', component: Foo },  
13.   { path: '/bar', component: Bar }  
14. ]  
15.   
16. // 3. 创建 router 实例，然后传 `routes` 配置  
17. // 你还可以传别的配置参数, 不过先这么简单着吧。  
18. const router = new VueRouter({  
19.   routes // （缩写）相当于 routes: routes  
20. })  
21.   
22. // 4. 创建和挂载根实例。  
23. // 记得要通过 router 配置参数注入路由，  
24. // 从而让整个应用都有路由功能  
25. const app = new Vue({  
26.   router  
27. }).$mount('#app')  

这是官方代码，这里有一个问题官方的组件写在index.html里的，我的是写在app.vue中的 所以第四步要写成

[javascript]  view plain  copy

1. / 4. 创建和挂载根实例。  
2. // 记得要通过 router 配置参数注入路由，  
3. // 从而让整个应用都有路由功能  
4. const app = new Vue({  
5.     router:router,  
6.     render: h => h(App)  
7. }).$mount('#app')  

render 函数是渲染一个视图，然后提供给 el 挂载，所以不加的话就是空白什么都没有

上面的修改完后继续跑，接着又报错You are using the runtime-only build of Vue where the template option is not available.

弄了一下午愣是没弄好，最后在知乎上看到说是vue会打包生成3个文件一个是 runtime only 的文件 vue.common.js，一个是 compiler only 的文件 compiler.js，一个是 runtime + compiler 的文件 vue.js。

用 webpack 的别名功能把 vue/dist/vue.js 命名成了 vue，不然vue 的 package.json 中的 main 指向的是 dist/vue.common.js。

webpack.config.js

[javascript]  view plain  copy

1. <pre style="overflow: auto; font-family: monospace, monospace; font-size: 15px; margin-top: 0px; margin-bottom: 0px; color: rgb(51, 51, 51); line-height: 22.5px;"><code class="language-text" style="font-family: Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace; font-size: 1em; overflow: auto;">resolve: {  
2.         alias: {  
3.             'vue': 'vue/dist/vue.js'  
4.         }  
5.     },</code></pre><p></p>  
6. <pre></pre>  
7. 期待已久的页面总算出来了<br>  
8. <br>  
9. <br>  
10. <p></p>