vue2+qiankun微服务-代码详解【初体验】

主应用配置

1、主应用安装qiankun

cnpm i qiankun

2、在main.js中引入qiankun

import Vue from 'vue'
import App from './App.vue'
import { registerMicroApps, start } from 'qiankun' //新增1
import router from './router'
Vue.config.productionTip = false

// 在主应用中注册子应用 新增2
registerMicroApps([{
  name: 'vueApp',
  entry: '//localhost:8082', //子应用的启用地址
  container: '#app-vue', //子应用所展示的地址 在App.vue中设置id为app-vue
  activeRule: '/app-vue', //路由地址
  props: {
    data: 'child子应用'
  }
  }])
start()

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

3、App.vue中设置子应用的位置

<template>
  <div id="app">
    主应用
    <router-view></router-view>
    <div id="app-vue"></div>//更改处
  </div>
</template>

4、router设置

import Vue from 'vue'
import VueRouter from 'vue-router'
import ParentVue from '../views/ParentVue.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'ParentVue',
    component: ParentVue
  }
]

const router = new VueRouter({
  mode: 'history',//需要增加
  routes
})

export default router

子应用

子应用不需要安装qiankun
1、新增public-path.js (与main.js同级)

/* eslint-disable camelcase */
if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

2、main.js
1、引入public-path.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './public-path' //引入
Vue.config.productionTip = false

//下方新增
let instance = null
function render (props = {}) {
  const { container } = props
  instance = new Vue({
    router,
    render: (h) => h(App)
  }).$mount(container ? container.querySelector('#app-vue') : '#app-vue') //app-vue是在主应用中设置的id
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

export async function bootstrap () {
  console.log('bootstraped')
}
export async function mount (props) {
  console.log('mount')
  render(props)
}
export async function unmount () {
  console.log('unmount')
  instance.$destroy()
  instance.$el.innerHTML = ''
  instance = null
}

new Vue({
  router,
  store,
  render: (h) => h(App)
}).$mount('#app-vue')

3、路由设置

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect:'/home'
  },
  {
    path: '/home',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: 'about' */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  base: window.__POWERED_BY_QIANKUN__ ? '/app-vue' : '/', //新增
  mode: 'history',//新增
  routes
})

export default router

4、打包设置

const name='child111'
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  lintOnSave:false,
  transpileDependencies: true,
  devServer: {
    port: 8082, //子应用启动端口号，不可随意修改，与上文中父应用注册的子应用端口号对应
    headers: {
      "Access-Control-Allow-Origin": "*", //循序跨域
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: "umd", // 把微应用打包成 umd 库格式
      // jsonpFunction: `webpackJsonp_${name}`,
    }
  }
})

此文章只是简单的加入了qiankun。
其中带来的样式问题还未探究