主项目

安装wujie

# vue2 框架
npm i wujie-vue2 -S

main.js配置

// vue2
import WujieVue from "wujie-vue2";

Vue.use(WujieVue);

使用

<!-- url参数为子应用启动的地址 --> 
<WujieVue
        width="100%"
        height="100%"
        name="testdemo"
        url="http://localhost:8080/"
        :sync="true"
 ></WujieVue>

子应用

main.js配置，挂载WUJIE

// vue2
if (window.__POWERED_BY_WUJIE__) {
    let instance;
    window.__WUJIE_MOUNT = () => {
        instance = new Vue({ router, store,render: (h) => h(App) }).$mount("#app");
    };
    window.__WUJIE_UNMOUNT = () => {
        instance.$destroy();
    };
} else {
    new Vue({ router, store,render: (h) => h(App) }).$mount("#app");
}

vue.config.js配置，支持跨域

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

先启动子项目，再启动父项目，访问

http://localhost:8081/