无界微应用基础改造指南

本文只记录对子应用需要改造的点

FAQ

1. 嵌入主应用后接口请求跨域问题
   proxy中增加onProxyRes拦截, 处理响应头

   onProxyRes: function (proxyRes, req, res) {
          console.log(req.url);
          if (req.method === 'OPTIONS') {
            proxyRes.headers['Access-Control-Allow-Origin'] =
              req.headers.origin || '*'
            proxyRes.headers['Access-Control-Allow-Credentials'] = true
            proxyRes.headers['Access-Control-Allow-Methods'] =
              'GET,POST,OPTIONS,PUT,DELETE,FETCH'
            // 这里的参数，根据自己项目增删
            proxyRes.headers['Access-Control-Allow-Headers'] =
              'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization,token,source,Language,Referer,Accept'
            proxyRes.statusCode = 204
          } else {
            proxyRes.headers['Access-Control-Allow-Origin'] =
              req.headers.origin || '*'
            proxyRes.headers['Access-Control-Allow-Credentials'] = true
          }
        }

2. 切换子应用状态保持
   关于无界的几种运行模式参见: https://wujie-micro.github.io/doc/guide/mode.html#%E5%8D%95%E...
   和乾坤类似, 入口文件导出钩子

   if (window.__POWERED_BY_WUJIE__) {
     window.__WUJIE_MOUNT = () => {
    render()
     };
     window.__WUJIE_UNMOUNT = () => {
    instance.$destroy();
    instance.$el.innerHTML = ''
    instance = null
     };
   }else{
     render()
   }