求帮助:Vue main.js不加载

503 阅读1分钟
问题:抱着学习的目的,我搭了个webpack-simple脚手架的Demo,在使用router路由的时候,页面加载一直是白板。在index.html以及main.js打印console.log()标记,结果index.html有打印出数据,main.js没有任何数据输出。折腾了好久,一直不行。 寻求帮助

贴代码: 

 main.js

console.log('main.js');

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import Regist from './Regist.vue'
import Login from './Login.vue'
Vue.use(VueRouter)
Vue.use(ElementUI)

Vue.config.productionTip = false

//路由
const router = new VueRouter({
  routes:[
    { path: '/', component: App },
    { path: '/login', component: Login },
    { path: '/regist', component: Regist }
  ],
  mode:'history'
})


new Vue({
  el: '#app',
  router,
  template: '<App/>',
  render: h => h(App)
})

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>page</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script>
    console.log('index.js');
  </script>
</html>

App.vue

<template>
  <div id="app">
    <h1>APP</h1>
    <li>
      <router-link to="login">登陆</router-link>
      <router-link to="regist">注册</router-link>
    </li>
    <Login/>
    <router-view></router-view>
  </div>
</template>

<script>
import Login from "./Login";
export default {
  name: 'app',
  components: {Login},
  data () {
    return {
    }
  }
}
</script>

<style>
</style>

Login.vue

<template>
  <div id="login">
    <h1>登陆</h1>
  </div>
</template>

<script>
    export default {
        name: "Login"
    }
</script>

<style scoped>

</style>

Regist.vue

<template>
    <div id="regist">
      <h1>注册</h1>
    </div>
</template>

<script>
    export default {
        name: "Regist"
    }

</script>

<style scoped>

</style>


源码地址:

https://gitee.com/hail2017/vue-demo.git