vue多项目合并策略

微应用配置

• main.js

const RulePage = (el, comName, config = {}, opt = {}) => {
   store.commit('setBaseUrl', config && config.baseUrl || '');
   store.commit('setDomainUrl', config && config.apiDomain || '');
   const props = opt.props || {};
   props.comName = comName;
   console.log(props);
   return new Vue({
       el,
       store,
       render: h => h(App, {
           props,
           on: opt.on
       })
   });
}
export default {
   RulePage,
}

• webpack打包配置

  configureWebpack: {
    output: {
        libraryTarget: 'umd'
        // 输出umd形式
    },
    ....
  }

主应用

将微应用打包成的app.js放入主应用根目录static中，防止被二次打包；

• 在主应用中使用 -- 根目录index.html中作为script标签引用

  <script src=static/plugin/device/js/app.a10b3010.js> </script>

• 页面中使用

  window.default.RulePage(this.$refs.topo, 'topo', {
      baseUrl: process.env.BASE_URL + 'api'
  }, {
      on: this.$listeners,
      props: this.$attrs
  });

搞定

• 补充一点 在主应用使用时，是挂载在window。default属性下的，是因为export default方式导出，如果换一种方式导出，例如：

// 在微应用main.js中如此导出：
  export const __wujie__ = {
      RulePage,
      RuleEdit
  }

那么在主应用使用时，应当如此访问：

  window.__wujie__.xxxx...