基于vue-cli  3.12.1测试

主项目

安装依赖

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

main.js引入

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

router.js路由配置,指向myPage组件

import Vue from 'vue'
import Router from 'vue-router'
import MyPage from './views/myPage.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [{
        // 非严格匹配，/my-page/* 都指向 MyPage 页面
        path: '/my-page/*', // vue-router@4.x path的写法为：'/my-page/:page*'
        name: 'my-page',
        component: MyPage,
      },
  ]
})

myPage组件

<div>
    <!-- 
        name(必传)：应用名称
        url(必传)：应用地址，会被自动补全为http://localhost:3000/index.html
        baseroute(可选)：基座应用分配给子应用的基础路由，就是上面的 `/my-page`
    -->
    <micro-app
        name="app1"
        url="http://localhost:8080/"
        baseroute="/my-page"
    ></micro-app>
</div>

子应用

router.js配置

base: window.__MICRO_APP_BASE_ROUTE__ || process.env.BASE_URL,

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: window.__MICRO_APP_BASE_ROUTE__ || process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
  ]
})

webpack配置

vue.config.js

在webpack-dev-server的headers中设置跨域支持

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

启用子项目（8080端口），再启用父项目 访问地址：

http://localhost:8081/my-page/Home