在 webpack 下 main.js 中定义的变量为什么在组件中访问不到？

如题，我用的是 vue2.0 + vue-router2.0 + vue-loader + webpack ，在 main.js 中定义了 router 变量，但是在的 vue 文件中访问 router 变量却提示没有定义，难道 webpack 下个 js 文件中的变量都是限定在特定文件内的嘛？

main.js 片段如下：

import Vue from 'vue' import VueRouter from 'vue-router' import App from './views/app.vue' Vue.use(VueRouter) const router = new VueRouter({ routes: [{ name: 'index', path: '/', component: require('./views/index.vue') }] }) new Vue({ el: '#app', router: router, render: h => h(App) }) 

app.vue 片段如下：

<template> <router-view></router-view> </template> 

index.vue 片段如下

<template> <div id="page-index"></div> </template> <script> export default { data() {}, mounted() { alert(router) } } </script> 

访问 "/" 路由时提示 router 未定义，这是为什么？昨天刚学 webpack ，看到一脸懵逼 T.T...