. Bar, bar, [the official introduction of the program is very clear, we do not do too much to repeat]

The official link of Qiankun is attached

“Scene”

My scenario is to build an integration platform that supports the modes of Qiankun host and Iframe host when introducing other systems

【 Usage 】 Pedestal application introduces no more than two modes

  • loadMicroApp(app, configuration?)// Manually import

  • registerMicroApps(apps, lifeCycles?)// Pre-register

The loadMicroAPP mode can be used when opening a fully independent child app, and I recommend it

For example, click a system button to open a new TAB page, which is the complete and independent sub-application. Using this mode, load sub-application can avoid the tedious work of pre-registering routes in the main application

----------------------------------------------------------------------------

When opening a subapp inline in the base app, loadMicroApp is ok if the subapp has more than one page and does not switch multiple routes, but not if the subapp has multiple routes!!

I currently use the hash routing mode for both the host and child applications

# # main application

mounted() {
    registerMicroApps([
      {
        name: 'reactApp'.entry: '//localhost:8081'.container: '#container'.activeRule: '/host/star'}, {name: 'vueApp'.entry: '//localhost:8080'.container: '#container'.activeRule: '/ap-e'}, {name: 'angularApp'.entry: '//localhost:4200'.container: '#container'.activeRule: '/app-angular',}]);/ / start qiankun
    start();
  },
Copy the code

# # application

const routes = [
  {
    path: '/host/star/home'.name: 'Home'.component: Home
  },
  {
    path: '/host/star/about'.name: 'About'.// route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () = > import(/* webpackChunkName: "about" */ '.. /views/About.vue')}]Copy the code
  <div id="app">
    <div id="nav">
      <router-link to="/host/star/home">Home</router-link> |
      <router-link to="/host/star/about">About</router-link>
    </div>
    <router-view />
  </div>
Copy the code

After deployment to the server, the primary application will fetch the sub-application with cross-domain problems. Nginx configuration is as follows

      location /host/star {

            alias   /home/apc/html/qkchild;
            index  index.html index.htm;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods *;
            add_header Access-Control-Allow-Headers *;
            if ($request_method = 'OPTIONS') {
              return 204;
            }
        }
        location /host/static {
            alias   /home/apc/html/qkchild/static;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods *;
            add_header Access-Control-Allow-Headers *;
            if ($request_method = 'OPTIONS') {
              return 204; }}Copy the code