vue-cli4.5.11 实现多入口路由功能实现

vue.config.js:

module.exports = {
    pages:{
        supplier:{
            entry:'src/supplier/main.js',
            template:'public/supplier.html',
            filename:'supplier.html',
            title:'合作伙伴'
        },
        staff:{
            entry:'src/staff/main.js',
            template:'public/staff.html',
            filename:'staff.html',
            title:'员工助手'
        }
    }
}

main.js:

import { createApp } from 'vue'
import VueRouter from 'vue-router'
import Supplier from './Supplier.vue'

import MicroPay from './components/MicroPay/index.vue'

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

const router = new VueRouter({
	mode:'hash',
	routes
})

createApp(Supplier).use(router).mount('#supplier')

Supplier.vue:

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

<script>
    export default {
        name: 'Supplier'
    }
</script>

components/MicroPay/index.vue:

<template>
    <div>MicroPay</div>
</template>

<script>
    export default {
        name:'MicroPay'
    }
</script>

现在访问 http://localhost:8080/supplier#/MicroPay 空白无法显示 components/MicroPay/index.vue 文件内容，求教是否路由设置不正确，求前端大神指教。