【前端】microApp微前端搭建简单Demo

创建项目

第一步，创建项目，分别创建base_app（主基座）、a_app(子项目1)

配置主基座项目

1. Main.js中引入@Micro-zoe/micro-app

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

2. 在页面中加入<micro-app>标签

<micro-app name='a_app' url='http://localhost:3001'></micro-app>

配置子项目

1. 在vue.config.js中配置路径、端口和跨域

module.exports={
 devServer:{
  host:'localhost',
  port:'3001',
  headers:{
   'Access-Control-Allow-Origin':'*'
  }
 }
}

启动项目

分别启动主基座和子项目即可展示