Microapplication configuration

  • 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, } Copy the code
  • Webpack packages the configuration
  configureWebpack: {
    output: {
        libraryTarget: 'umd'
        // Output umD
    },
. } Copy the code

The main application

Put the packaged app.js in the static root directory of the main application to prevent it from being packaged twice.

  • Used in main applications — referenced as script tags in the root directory index.html
  <script src=static/plugin/device/js/app.a10b3010.js> </script>
Copy the code
  • Page use
  window.default.RulePage(this.$refs.topo, 'topo', {
      baseUrl: process.env.BASE_URL + 'api'
  }, {
      on: this.$listeners,
      props: this.$attrs
 }); Copy the code

done

  • I should add that when used by the main application, it is mounted on window. The value under the default attribute is exported in export default mode. If the value is exported in another mode, for example:
// In the microapplication main.js export like this:
  export const __wujie__ = {
      RulePage,
      RuleEdit
  }
Copy the code

So when used by the main application, it should be accessed like this:

  window.__wujie__.xxxx...
Copy the code