1. 安装microApp

npm install @micro-zoe/micro-app --save

2.在main.js中引入

import microApp from '@micro-zoe/micro-app' // microApp
microApp.start()

3.解决跨域(子应用)

// 子应用vue.config.js
devServer{
    // ...
    headers: {
        'Access-Control-Allow-Origin': '*'
    }
}

4.基座调用(动态渲染子应用)

这里动态渲染子应用我用的是一个页面,每次通过跳转其它页面的重定向去重新进入这个页面

// middlewares.vue

created() {
    this.$router.push({ path: '/child' })
}




<-- childApp -->

<micro-app
      :name="oneSide.app_name"
      :url="oneSide.url"
      :baseroute="'/' + oneSide.path"
      style="width: 100%;height:100%;position: relative"
      @created="created"
      @beforemount="beforemount"
      @mounted="mounted"
      @unmount="unmount"
      @error="error"
/>

5.子应用配置

const createRouter = () => new Router({
  mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  base: window.__MICRO_APP_BASE_ROUTE__ || process.env.BASE_URL,
  routes: constantRoutes
})

6.子应用环境变量获取

// main.js
if (window.__MICRO_APP_ENVIRONMENT__) console.log('我在微前端环境中')
else console.log('我不在微前端环境中')

GitHub 加速计划 / vu / vue-element-admin
87.26 K
30.42 K
下载
PanJiaChen/vue-element-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统模板,支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
最近提交(Master分支:26 天前 )
0caa975e - 2 年前
cd3f7267 - 2 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐