微前端乾坤项目vue集成子系统流程-Toy模板网

这篇具有很好参考价值的文章主要介绍了微前端乾坤项目vue集成子系统流程。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在 src 目录新增 public-path.js：

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

入口文件 main.js 修改，为了避免根 id #app 与其他的 DOM 冲突，需要限制查找范围。

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

Vue.config.productionTip = false;

let router = null;
let instance = null;
function render(props = {}) {
  const { container } = props;
  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/',
    mode: 'history',
    routes,
  });

  instance = new Vue({
    router,
    store,
    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;
}

3.打包配置修改（vue.config.js）：

const { name } = require('./package');
module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      jsonpFunction: `webpackJsonp_${name}`, // webpack 5 需要把 jsonpFunction 替换成 chunkLoadingGlobal
    },
  },
};

4.路由配置：

import { registerMicroApps, runAfterFirstMounted, start, addGlobalUncaughtErrorHandler } from 'qiankun';

// 定义微应用
const apps = [
  {
    name: 'subapp1', // 微应用的名称
    entry: '//localhost:8081', // 微应用的入口 URL
    container: '#subapp-container', // 微应用挂载的容器
    activeRule: '/subapp1', // 触发微应用的规则
  },
  {
    name: 'subapp2',
    entry: '//localhost:8082',
    container: '#subapp-container',
    activeRule: '/subapp2',
  },
  // 根据需要添加更多微应用
];

// 注册微应用
registerMicroApps(apps, {
  beforeLoad: app => {
    console.log('加载微应用前:', app.name);
  },
  beforeMount: [
    app => {
      console.log('挂载微应用前:', app.name);
    },
  ],
  afterUnmount: [
    app => {
      console.log('卸载微应用后:', app.name);
    },
  ],
});

// 第一个微应用挂载后执行的回调
runAfterFirstMounted(() => {
  console.log('第一个微应用已挂载');
});

// 设置全局未捕获错误处理器
addGlobalUncaughtErrorHandler(event => {
  console.error('全局未捕获错误:', event);
});

// 启动应用
start();

export default apps;

// 主系统的路由配置文件

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

// 引入定义的微应用
import apps from './qiankun-config'; // 上面给出的包含微应用信息的文件

// 创建一个空的路由实例
const router = new Router({
  mode: 'history',
  routes: [
    // 其他主系统的路由...

    // 微应用的容器路由
    {
      path: '/subapps',
      component: {
        render: h => h('router-view'),
      },
      children: [],
    },
  ],
});

// 注册微应用的容器路由
apps.forEach(app => {
  router.options.routes[0].children.push({
    path: app.activeRule,
    name: app.name,
    component: () => import('@/views/MicroAppContainer'), // MicroAppContainer 是用于挂载微应用的组件
  });
});

export default router;

###主系统的url路由配置：

{
      name: '审批',
      id: '76aab9145475483b910e65f75,
      icon: '&#xe601;',
      path: '',
      activeRouters: [],
      auth: true,
      level: 1,
      children: [
        {
          name: '用户管理',
          activeRouters: [],
          auth: true,
          level: 2,
          id: '76aab9145475483b910e65f7',
          children: [
            {
              name: '用户列表',
              path: '/user/list',
              activeRouters: [],
              auth: true,
              level: 3,
              id: 'f5f974089e134bf39b86a348'
            }
          ]
        },
      ]
}

###子系统的url路由配置：文章来源地址https://www.toymoban.com/news/detail-790605.html

{
    path: '/user',
    component: () => import('@/user/list'),
    name: 'user',
    redirect: '/user',
    meta: {
      title: '用户管理',
      noCache: true,
      isTitleGoBack: true
    },
    children: [
      {
        path: '/user',
        name: 'user',
        component: () => import('@/user'),
        meta: {
          title: '用户列表',
          auth: true,
          activeMenu: '/work/user/list',
          noCache: true,
          mergeCode: 'user_list',
          isClearContentSpace: true,
          isTitleGoBack: true
        }
      },
    ]
  }

到了这里，关于微前端乾坤项目vue集成子系统流程的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！