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 文件内容，求教是否路由设置不正确，求前端大神指教。