第三方应用集成

// src/components/layouts/components/AppMain.vue
import { registerMicroApps, start } from 'qiankun'
import { getMicroApps } from '@/utils'

mounted: function() {
    // 注册微应用（需要集成的模块）
    registerMicroApps(getMicroApps(), {
        beforeLoad: (app) => {
            this.loading = true
        },
        afterMount: (app) => {
            this.loading = false
        }
    })
    // 禁用预加载   strictStyleIsolation: false  去掉严格模式
    start({ prefetch: false })
}

// utils/index.js
export function getMicroApps() {
  const microApps = [
    {
        name: 'waf-micro-web',
        entry: buildEntry(process.env.VUE_APP_QIANKUN_APIWEB_ENTRY),
        container: '#subapp-container',
        activeRule: '/waf-web/waf-micro-web/',
        props: { store: store }
    }
  ]
  return microApps
}

function buildEntry(appUrl) {
  if (process.env.NODE_ENV === 'development') {
    return appUrl
  } else {
    return `//${window.location.host}${appUrl}`
  }
}

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

// 延迟2秒后跳转到登录页面
 setTimeout(() => {
  store.dispatch('user/resetToken').then(() => {
  // 生产环境，统一由配置地址进行登录
     if (process.env.NODE_ENV === 'production') {
       window.location.href = process.env.VUE_APP_LOGIN_URL
      } else {
       router.push(`/login`).catch(err => {err})
 }

const createRouter = () => new Router({
  base: window.__POWERED_BY_QIANKUN__ ? process.env.VUE_APP_QIANKUN_PUBLICPATH : process.env.VUE_APP_PUBLICPATH,
  mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const actions = {
  // qiankun微应用集成初始化用户
  loadUserInfo({ commit }, storeData) {
    return new Promise((resolve) => {
      commit('SET_USER_INFO', storeData.userInfo)
      commit('SET_TOKEN', storeData.token)
      resolve()
    })
  },
......
}    

router.beforeEach(async(to, from, next) => {
  // start progress bar
  NProgress.start()
  if (window.__POWERED_BY_QIANKUN__) {
    next()
  } else {
......
}

import '@/utils/public-path'
import router, { resetRouter } from './router'
import { microAppCode } from '@/settings'
// 删除babel-polyfill 引用

let instance = null

function render(props = {}) {
  const { container } = props
  instance = new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount(container ? container.querySelector('#app') : '#app')
}

// 如果是独立运行window.__POWERED_BY_QIANKUN__=undefined
if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

// 应用启动执行一次
export async function bootstrap() {
}

export async function mount(props) {
  const storeData = props.store.getters
  // 加载用户信息
    store.dispatch('user/loadUserInfo', storeData).then(() => {
        const routers = processRouter(storeData.userInfo.permissions, [])
        router.addRoutes(routers)
    render(props)
  })
}

function processRouter(permissions, routers) {
    if (!permissions) {
    return
  }
  for (const item of permissions) {
    // 未指定组件，采用BlankLayout
    let component = '' // 录入的文件路径
    // 菜单属性当前系统
    if (item.microApp && microAppCode === item.microApp) {
      component = item.microAppComponent.trim()
      let menuPath = item.url || `/${item.id}`
      // 将带有应用上下文的路径替换为/，上下文路由路由的base指定
      menuPath = menuPath.replace(process.env.VUE_APP_PUBLICPATH, '/')
      const menu = {
        path: menuPath,
        name: item.perms,
        component: resolve => require(['@/views/' + component + '.vue'], resolve),
        hidden: !item.isVisible,
        meta: {
          title: item.name
        }
      }
      routers.push(menu)
    }
      if (item.children && item.children.length > 0) {
          processRouter(item.children, routers)
      }
  }
  return routers
}

export async function unmount() {
  instance.$destroy()
  instance = null
  resetRouter()
}

const { name } = require('./package')
const tmpTime = new Date().getTime()
// 子应用打包格式
configureWebpack: {
    output: {
      // 把子应用打包成 umd 库格式
      library: `${name}-[name]`,
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_${name}`,
      // 输出重构  打包编译后的 文件名称  【模块名称.时间戳】
      filename: `static/js/[name].${tmpTime}.js`,
      chunkFilename: `static/js/[name].${tmpTime}.js`
    }
},
......    
// 字体打包    
chainWebpack: config => {
	config.module
	  .rule('fonts')
	  .test(/.(ttf|otf|eot|woff|woff2)$/)
	  .use('url-loader')
	  .loader('url-loader')
	  .tap(options => {
	    options = {
	      // limit: 10000,
	      name: '/static/fonts/[name].[ext]'
	    }
	    return options
	  })
	  .end()    
......    
// 添加headers，让应用可以跨域调用
devServer: {
 headers: {
   'Access-Control-Allow-Origin': '*'
 },    

//  main.js
import { setTheme } from '@/utils/theme'
import variables from '@/styles/element-variables.less'
export async function mount(props) {
 	......
  // 加载用户信息
  store.dispatch('user/loadUserInfo', storeData).then(() => {
    const routers = processRouter(storeData.userInfo.permissions, [])
    if (process.env.NODE_ENV !== 'production') {
      console.info('routers:', routers)
    }
    setTheme(variables.theme)
    router.addRoutes(routers)
    render(props)
  })
}