子应用修改配置

1.修改vue.config.js

module.exports = {
    .....,
    devServer:{....},
    // 加上 微前端改造代码
    configureWebpack: {
        output: {
            library: 'admin', // admin这个应用名称（例如：存储命名是 obj-storage）
            libraryTarget: 'umd',
        },
    }
}

2.修改 main.js

const getComputedStyle = window.getComputedStyle;
window.getComputedStyle = (el, ...args) => {
    // 如果为shadow dom则直接返回
    if (el instanceof DocumentFragment) {
        return {};
    }
    return Reflect.apply(getComputedStyle, window, [el, ...args]);
};
// 声明实例
let instance = null
// render 函数
function render(props = {}) {
    const { container } = props
    instance = new Vue({
        router,
        store,
        render: (h) => h(App),
    }).$mount(container ? container.querySelector('#app') : '#app')
}

if (window.__POWERED_BY_QIANKUN__) {
    // eslint-disable-next-line no-undef
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

if (!window.__POWERED_BY_QIANKUN__) {
    render()
}
// 子应用 启动钩子函数
export async function bootstrap(props) {
    console.log(props)
    console.log('bootstrap')
}
// 子应用 挂载钩子函数
export async function mount(props) {
    render(props)
}
// 子应用 退出钩子函数
export async function unmount(props) {
    console.log(props)
    instance.$destroy()
    instance.$el.innerHTML = ''
    instance = null
}

3.修改 router.js 路由

  mode: 'hash',
  base: window.__POWERED_BY_QIANKUN__? '/admin' : process.env.BASE_URL, // admin这个应用名称（例如：存储命名是 obj-storage）

4.跳转到其他子应用 或者 主应用
// 跳转到主应用订单确认页面

window.history.pushState(null, '', "/home-orderParticulars?id=O2021083110085017387");
// 跳转到其他子应用（rocketmq）
window.history.pushState(null, '', "/wt-rocketmq#/RocketMQ/index/establish");

5.子应用可以通过父应用localStorage获取值,如果接入微前端，url不获取token，role等其他值

token  用户token值 localStorage.getItem('token')
croleId 用户角色Id  获取：同上
currentName1 用户角色名称  获取：同上
displayName 用户真实姓名  获取：同上
userName  用户工号  获取：同上

6.父应用与子应用通信，子应用与子应用通信

initGlobalState  // 父应用初始化值, 获取值变化可参考 此项目（cloud-admin）/src/utils/app-store.js 
    ignore: '',    // 备用字段
    msg: '',       // 备用字段
    logout: false  // 当主应用退出登录状态，通知到各个子应用(场景：父应用执行注销登录，子应用也要调用【产品后台】注销登录)

onGlobalStateChange // 监控值得变化
setGlobalState    // 设置值

如果需要通信，需要与父应用配置值
如果需要父应用，进入子应用需要带数据（父传子），请告知，会提前在配置子应用把值挂载到props
案例：可以参考，此项目（cloud-admin）/src/utils/app-store.js 

7.页面qiankun变量获取
c

omputed:{
    isQiankun (){
      return window.__POWERED_BY_QIANKUN__
    }
  },

8.部署注意(nginx 配置)

nginx 配置许添加允许跨域

server {
  listen    ....
  server_name ......
  
  # 配置跨域访问，此处是通配符，严格生产环境的话可以指定为主应用 192.168.2.192:8889
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
  add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
  
  location / {
    .....
  }
}