vueRouter沒有報(bào)錯(cuò)，但是頁面渲染空白

我的index.js代碼

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import routers from './routers';
Vue.use(VueRouter);
const router = new VueRouter({
    routers
});
let div = document.createElement('div');
div.id = 'app';
document.body.appendChild(div);
new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

我的app.vue代碼

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

<script>
    export default {
        name: 'app',
        mounted() {
        window.addEventListener('resize', this.handleResize);
        this.handleResize();
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
    },
    methods: {
        handleResize() {
            var w = document.documentElement.clientWidth;
            document.getElementsByTagName('html')[0].style['font-size'] = Math.min((w / 10).toFixed(1), 540 / 10) + 'px';
        }
    }

    }
</script>

roters.js代碼

// 路由配置
const HomePage = resolve => require(['./pages/index.vue'], resolve);
export default [
    {
        name: 'index',
        path: '/index',
        components: HomePage
    }
]

我的文件夾結(jié)構(gòu)

關(guān)于router.js

// 我嘗試過這么寫但是還是渲染空白
import HomePage from './pages/index.vue';
export default [
    {
        name: 'index',
        path: '/index',
        components: HomePage
    }
]

希望幫忙看下為什么會(huì)渲染空白。

下面這個(gè)圖是我渲染之后的本地dom結(jié)構(gòu)

下面是我這個(gè)項(xiàng)目的git倉庫地址

https://github.com/wustzhaohui/blog.git