微前端 qiankun 该怎么打包部署

Question

基座:main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
import {
  registerMicroApps,
  start
} from "qiankun"
const apps = [{
    name: "vueApp", //应用名
    entry: "//localhost:10000", // 默认会加载HTML 解析里面的js 动态执行(子应用必须支持跨域) fetch
    container: '#vue', //容器
    activeRule: '/vue', //激活的路径
    props:{a:1}
    
  }, {
    name: "mesApp",
    entry: "//localhost:8888", // 默认会加载HTML 解析里面的js 动态执行(子应用必须支持跨域) fetch
    container: "#mes",
    activeRule: '/mes'
  }

]
registerMicroApps(apps); //注册应用
start({
  prefetch: false // 取消预加载 
}) //开启
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

基座:App.vue

<template>
  <div >
    <el-menu :router="true" mode="horizontal">
      <!-- 基座中可以放自己的路由 -->
      <el-menu-item index="/">Home </el-menu-item>
      <el-menu-item index="/vue">vue应用</el-menu-item>
      <el-menu-item index="/mes"> react应用</el-menu-item>
    </el-menu>
    <router-view></router-view>
    <div id="vue"></div>
    <div id="mes"></div>
  </div>
</template>

微应用 main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false
let instance = null

function render(props) {
  instance = new Vue({
    router,
    render: h => h(App)
  }).$mount('#app') //挂载到自己的html中,基座会拿到这个挂载后的 html 将其插入进去
}
if (window.__POWERED_BY_QIANKUN__) { //动态添加publicPath
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
// 
if (!window.__POWERED_BY_QIANKUN__) { //默认独立运行
  render()
}

// 子组件协议就好了

export async function bootstrap() {}
export async function mount(props) {
  console.log(props);
  render();
}
export async function unmount() {
  instance.$destroy();
}

子应用 vue.config.js

module.exports = {
    devServer: {
        port: 10000,
        headers: {
            'Access-Control-Allow-Origin': '*' //允许访问跨域
        }
    },
    configureWebpack: {
        output: {
            library: `vueApp`,
            libraryTarget: 'umd',
          },

    }
}

子应用 router - index.js

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/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')
  }
]

const router = new VueRouter({
  mode: 'history',
  base:'/vue',
  routes
})

export default router

Answer 1

在根目录 npm run build