Following on from the previous chapter, we will introduce how to configure the VUE subsystem. In the website of Qiankun, we only explained the configuration modification of VUe2 as a subsystem, so we also took VUe2 as an example to demonstrate. 3. Vue subsystem:

Vue scaffolding command can be installed if it is not already installed:

sudo npm install -g @vue/cli
Copy the code

Then install the application, select vue2 to install it, and run the following command:

vue create vue-app
Copy the code

After initialization is complete, we start to modify the vue project file:

SRC: public-path-.js public-path-.js

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
Copy the code

(2) Then, modify the entry file main.js to limit the scope of the root id #app to props to avoid collisions with other DOM objects. When configuring the VueRouter in an Qiankun environment, base is /vue, which is the routing of the VUE subsystem. If not in the Qiankun environment, directly execute the render function. Three lifecycle hook functions specified by the Qiankun framework are exported:

import './public-path'
import Vue from 'vue'
import VueRouter from 'vue-router';
import App from './App.vue';

Vue.config.productionTip = false

let router = null;
let instance = null;

function render(props = {}) {
  const { container } = props;
  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? '/vue' : '/',
    mode: 'history'}); instance =new Vue({
    router,
    render: h => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}

if(! window.__POWERED_BY_QIANKUN__) { render(); }export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}

export async function mount(props) {
  console.log('[vue] props from main framework', props);
  render(props);
}

export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = "'; instance = null; router = null; }Copy the code

(3) the final packaging configuration changes (vue. Config. Js), cooperate with the base port is set to 8080, allowed to cross domain, and you need to set up htmlWebpackPlugin. Options. The title attribute:

const path = require('path'); const { name } = require('./package'); function resolve(dir) { return path.join(__dirname, dir); } const port = 8080; // dev port module.exports = { /** * You will need to set publicPath if you plan to deploy your site under a sub path, * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/, * then publicPath should be set to "/bar/". * In most cases please use '/' !!! * Detail: https://cli.vuejs.org/config/#publicpath */ outputDir: 'dist', assetsDir: 'static', filenameHashing: true, devServer: { hot: true, disableHostCheck: true, port, overlay: { warnings: false, errors: true, }, headers: {' access-Control-allow-Origin ': '*',},}, // Custom webPack configureWebpack: {resolve: {alias: {'@': Resolve (' SRC '),},}, output: {library: '${name}-[name] ', libraryTarget: 'umd', jsonpFunction: `webpackJsonp_${name}`, } }, chainWebpack: config => { config .plugin('html') .tap(args => { args[0].title = "My Vue App"; return args; })}};Copy the code

Once started, you can switch to the VUE subproject through the base system.

Micro front-end project deployment:

Now that we’ve covered the debug environment for a micro front-end project, how do we deploy it online? The deployment mode described in this paper is that the base system and subsystems belong to separate SPA services and are placed in the same server. The static files of the package completion of the subsystem are put into the secondary directory of the base system. Here are the detailed steps:

1. During deployment, we want to put the content of the package file of the subsystem into the child/ reactApp/and child/vue/ folders of the base system, so we need to modify the configuration file of the registered sub-application of the base system as follows:

{
  name: 'reactapp',
  entry: '/child/reactapp/'.// entry: 'http://localhost:3000',
  container: '#subapp-viewport',
  loader,
  activeRule: '/reactapp',
},
{
  name: 'vue',
  entry: '/child/vue/'.// entry: 'http://localhost:8080',
  container: '#subapp-viewport',
  loader,
  activeRule: '/vue',}Copy the code

2. For the React sub-app, we need to use the same publicPath as /child/ reactApp/when packaging, so we need to add configuration items directly to package.json:

{
 "homepage": "/child/reactapp/"
}
Copy the code

After packing:

npm run build
Copy the code

All requests to child apps go to the /child/ reactApp/directory.

3. For the vue subsystem, you also need to modify the publicPath pointing to /child/vue/ during construction, so you need to modify the following in vue.config.js:

module.exports = {
  /**
   * You will need to set publicPath if you plan to deploy your site under a sub path,
   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
   * then publicPath should be set to "/bar/".
   * In most cases please use '/' !!!
   * Detail: https://cli.vuejs.org/config/#publicpath
   */
  publicPath: '/child/vue/'
}
Copy the code

Also package with its own package command:

npm run build
Copy the code

Then move the contents of the package file to the /child/vue secondary directory of the base system.

The deployment is complete. In a coordinated environment, pay attention to cross-domain configuration, and pay attention to publicPath configuration during deployment. If you have other questions in the development, please share them again.