• vue乾坤微前端项目

    1、主应用

    • 安装乾坤
    npm i qiankun -S
    • 注册微应用并启动：
    1. import { registerMicroApps, start } from 'qiankun';
    2.  
    3. //设置两个微应用
    4. registerMicroApps([
    5.   {
    6.     name: 'vue1', //要跟package.json中的name保持一致
    7.     entry: '//localhost:8081', //本地就这么写
    8.     container: '#container',  //主应用id
    9.     activeRule: '/app-vue1', //这个值必须跟子应用中路由的base一致
    10.   },
    11.   {
    12.     name: 'vue2',
    13.     entry: '//localhost:8082',
    14.     container: '#container2',  //可以在主应用的其他div上挂在微应用
    15.     activeRule: '/app-vue2',
    16.   }
    17. ]);
    18. // 启动 qiankun
    19. start();

    2、微应用

    • 在 src 目录新增 public-path.js
    1. //public-path.js
    2.  
    3. if (window.__POWERED_BY_QIANKUN__) {
    4.   __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
    5. }
    • 设置 history 模式路由的 base
    1. //router.js
    2.  
    3. const router = new VueRouter({
    4.   base: window.__POWERED_BY_QIANKUN__ ? '/app-vue1' : '',  //base中的'/app-vue1'要和主应用中的activeRule一致
    5.   mode: 'history',  //建议使用history模式
    6.   routes: baseRoutes  //子应用路由地址
    7. })

      修改main.js入口文件

    1. //main.js
    2.  
    3. import './public-path';
    4. import Vue from 'vue';
    5. import VueRouter from 'vue-router';
    6. import App from './App.vue';
    7. import routes from './router';
    8. import store from './store';
    9.  
    10. Vue.config.productionTip = false;
    11.  
    12. let router = null;
    13. let instance = null;
    14. function render(props = {}) {
    15.   const { container } = props;
    16.   router = new VueRouter({
    17.     base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/',
    18.     mode: 'history',
    19.     routes,
    20.   });
    21.  
    22.   instance = new Vue({
    23.     router,
    24.     store,
    25.     render: (h) => h(App),
    26.   }).$mount(container ? container.querySelector('#datacenter') : '#datacenter'); //此处的#datacenter要跟index.html中的id保持一致
    27. }
    28.  
    29. // 独立运行时
    30. if (!window.__POWERED_BY_QIANKUN__) {
    31.   render();
    32. }
    33.  
    34. export async function bootstrap() {
    35.   console.log('[vue] vue app bootstraped');
    36. }
    37. export async function mount(props) {
    38.   console.log('[vue] props from main framework', props);
    39.   render(props);
    40. }
    41. export async function unmount() {
    42.   instance.$destroy();
    43.   instance.$el.innerHTML = '';
    44.   instance = null;
    45.   router = null;
    46. }

    修改index.html中的#app

    1. <!DOCTYPE html>
    2. <html lang="">
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
    7.     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    8.     <title><%= htmlWebpackPlugin.options.title %></title>
    9.   </head>
    10.   <body>
    11.     <noscript>
    12.       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    13.     </noscript>
    14.     <!-- 避免id冲突，修改#app -->
    15.     <div id="datacenter"></div>
    16.   </body>
    17. </html>

    修改vue.config.js配置

    1. //vue.config.js
    2.  
    3. const { name } = require('./package');  //从package.json中获取name
    4. module.exports = {
    5.   devServer: {
    6.     headers: {
    7.       'Access-Control-Allow-Origin': '*',
    8.     },
    9.   },
    10.   configureWebpack: {
    11.     output: {
    12.       library: `${name}-[name]`,  // 微应用的包名，这里与主应用中注册的微应用名称一致
    13.       libraryTarget: 'umd', // 把微应用打包成 umd 库格式
    14.       jsonpFunction: `webpackJsonp_${name}`, // 按需加载相关，设置为 webpackJsonp_微应用名称 即可
    15.     },
    16.   },
    17. };

    3、路由配置

    主应用的路由一定要和微应用保持一致

    1. //主应用
    2.  {
    3.     path: '/personalCenter',  // personalCenter为例
    4.     name: 'personalCenter',
    5.     component: () => import('@/views/personalCenter/index'),
    6.     meta: {
    7.       title: '个人中心',
    8.     },
    9.   },
    10.  
    11.  
    12. //微应用
    13.   {
    14.     path: '/personalCenter/*',  // personalCenter为基路由。*表示通配，这个一定要配置
    15.     name: 'personalCenter',
    16.     component: () => import('@/views/personalCenter/index'),
    17.     meta: {
    18.       title: '个人中心',
    19.     },
    20.   },

  • 相关阅读:
    乾元通聚合路由器实现多5G转WIFI6信号覆盖
    响应式布局（3种） + flex计算
    Python开源项目周排行 2023年第34周
    Sqlite安装配置及使用
    社区团购商城小程序v18.1开源独立版+前端
    还在为数据库事务一致性检测而苦恼？让Elle帮帮你，以TDSQL为例我们测测 | DB·洞见#7
    vue和react的区别？
    一步一步分析ChatGPT，1 粘性，2 传染性， 3 双边网络效应
    Spring系列文章：面向切面编程AOP
    字典类型和字典函数、字典方法
  • 原文地址：https://blog.csdn.net/yanby921005/article/details/134317318