我遇到了一个问题，下面是场景：
我开发了一个vue 应用程序（my-admin 微应用程序） ，它有 4-5 个屏幕/组件（管理用户、管理通知、管理角色等），并且我创建了一个router.js，我在其中编写了以下内容：
...imports...
Vue.use(VueRouter);
// }
const routes = [
{
path: '/',
name: 'main-layout',
component: MainLayout,
children:[
{
path : 'manage-user',
name : 'manage-user',
component : ManageUserComponent
},
{
path : 'manage-role',
name : 'manage-role',
component : ManageRoleComponent
}
]
}
]
const router = new VueRouter({
routes
})
export default router
我在我的main.js中导入了这个路由器对象，如下所示：
...imports...
new Vue({
router,
render: h => h(App),
}).$mount('#app')
最后我将我的这个微应用程序作为 web 组件（MainLayout 组件）包装在 main.js中，如下所示：
const myAdmin = wrap(Vue,MainLayout)
window.customElements.define('my-admin', myAdmin)
我使用以下命令构建了这个微应用：
"build": "vue-cli-service build --target wc --name my-admin ./src/main.js",
这就是这个微型应用程序的全部内容。如果我单独运行这个微应用程序，它运行得很好。
但在我的场景中，我有一个仅在 Vue 中开发的 shell 应用程序（my-shell）。并且这个 shell 应用程序也有自己的 vue 路由器，并在其 main.js 中导入，如下所示：
. 外壳路由器：
...imports...
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'container',
component: Container,
children:[
{
path : 'admin',
name : 'admin-microapp',
component : AdminMicroAppContainerComponent
},
{
path : 'other',
name : 'other-microapp',
component : OtherMicroAppContainerComponent
}
]
}
]
const router = new VueRouter({
routes
})
export default router
我将此路由器对象导入到 my-shell 的 main.js中，如下所示：
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
在 my-shell 的 index.html 中，我添加了标签（在里面）来加载我的微应用程序 buid（my-admin.js 文件），如下所示：
<script src="../assets/my-admin/dist/my-admin.js"></script>
<script src="../assets/other-microapps/dist/micro-app.js"></script>
但是当我启动 my-shell 应用程序时。它抛出以下错误：
Uncaught TypeError: Cannot redefine property: $router.
我能做些什么来摆脱这个错误？
