1.微前端 - 父应用(基座)与子应用

micro-app文档

基座配置

1.下载插件

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

2.在基座的入口文件中引入

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

3.跨域解决

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

4.基座调用

<!-- 
    name(必传)：应用名称
    url(必传)：应用地址，会被自动补全为http://localhost:3000/index.html
    baseroute(可选)：基座应用分配给子应用的基础路由，就是上面的 `/my-page`
    url即启动vue项目的时候,cmd窗口启动的地址
-->
<micro-app name="app1" url="http://10.191.70.246:3000/" baseroute="/home"></micro-app>

子应用配置

1.设置基础路由与路由模式

// router.js
const router = new VueRouter({
  mode: 'history', // 需要为历史路由
  base: window.__MICRO_APP_BASE_ROUTE__ || process.env.BASE_URL,
  routes,
})

2.处理跨域

// vue.config.js
module.exports = {
  devServer: {
    port: 3006,
    headers: {
      /**设置本地运行的跨域 */ 'Access-Control-Allow-Origin': '*',
    },
  },
}

环境变量获取

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