Vue-router showing blank page

Hi there,
I created a vue program, however is showing a blank page.

This is my main.vue:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'


import LoginComponent from './pages/login/LoginComponent'

Vue.config.productionTip = false
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: LoginComponent
  }
]

const router = new VueRouter({
  routes // short for `routes: routes`
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

Here is my App.vue code:

    <template>
      <div id="app">
        <router-view></router-view>
      </div>
    </template>

    <script>
    export default {};
    </script>

    <style>
    </style>

My LoginComponent.vue code:

    <template>
      <p>Login</p>
    </template>

    <script>
    export default {
      }
    </script>

    <style scoped>
    </style>

and my index.html code:

    <!DOCTYPE html>
    <html lang="">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <title><%= htmlWebpackPlugin.options.title %></title>
      </head>
      <body>
        <noscript>
          <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
      </body>
    </html>

Someone can help me?

Not sure how webpack works, but shouldn’t index.html contain a <script> element that loads your compiled JavaScript code? Or will webpack add that automatically for you?