import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
// 引入qiankun
import {
	registerMicroApps,
	start
} from 'qiankun';
const apps = [{
		name: 'vueApp', // 應(yīng)用的名字
		entry: 'http://localhost:8081/', // 默認(rèn)會(huì)加載這個(gè)html 解析里面的js 動(dòng)態(tài)的執(zhí)行 （子應(yīng)用必須支持跨域）fetch
		container: '#vue', // 容器名（此項(xiàng)目頁(yè)面中定義的容器id，用于把對(duì)應(yīng)的子應(yīng)用放到此容器中）
		activeRule: '/vue', // 激活的路徑
		props: {
			a: 1
		} // 傳遞的值（可選）
	},
	{
		name: 'reactApp',
		entry: 'http://wfios.com:1667/dqGxpt_qt/', // 默認(rèn)會(huì)加載這個(gè)html 解析里面的js 動(dòng)態(tài)的執(zhí)行 （子應(yīng)用必須支持跨域）fetch
		container: '#react',
		activeRule: '/react',
	}
]

registerMicroApps(apps); // 注冊(cè)應(yīng)用
start({
	prefetch: false // 取消預(yù)加載
});
new Vue({
	render: h => h(App),
}).$mount('#app')

<template>
  <div id="app">
	  <a href='/vue'>vue應(yīng)用1</a>
	  <a href='/react'>應(yīng)用2</a>
    <div id="vue"></div>
    <div id="react"></div>
  </div>
</template>
 
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
 
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

import Vue from 'vue';
import App from './App.vue';
 
Vue.config.productionTip = false;
 
let router = null;
let instance = null;
function render(props = {}) {
  const { container } = props; 
  instance = new Vue({
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}
 
 
 
if (window.__POWERED_BY_QIANKUN__) { // 動(dòng)態(tài)添加publicPath
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
if (!window.__POWERED_BY_QIANKUN__) { // 默認(rèn)獨(dú)立運(yùn)行
  render();
}
 
// 父應(yīng)用加載子應(yīng)用，子應(yīng)用必須暴露三個(gè)接口：bootstrap、mount、unmount
// 子組件的協(xié)議就ok了
export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
  console.log('[vue] props from main framework', props);
  render(props);
}
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
  router = null;
}

const { name } = require('./package');
module.exports = {
  lintOnSave: false,  	
  devServer: {
    port: 8081,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微應(yīng)用打包成 umd 庫(kù)格式
      //jsonpFunction: `webpackJsonp_${name}`,// 取決于webpack的版本（可不要，但小于webpack5.x則需要加上）
    },
  }
};

const router = new VueRouter({
    mode: 'history',
    base: window.__POWERED_BY_QIANKUN__ ? "/vue" : "/",//基礎(chǔ)路徑
    routes
})