微前端qiankun架构 (基于vue2实现)使用教程-Toy模板网

这篇具有很好参考价值的文章主要介绍了微前端qiankun架构 (基于vue2实现)使用教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

工具使用版本

node --> 16+
@vue/cli --> 5+

创建文件

创建文件夹qiankun-test。

使用vue脚手架创建主应用main和子应用dev

微前端qiankun架构 (基于vue2实现)使用教程

主应用

安装 qiankun:

yarn add qiankun 
 或者 
npm i qiankun -S

使用qiankun：

在 utils 内创建微应用文件夹 microApp,在该文件夹内创建微应用出口文件 index.js，路由文件 microAppRouter,配置函数文件 microAppSetting。

路由文件 microAppRouter

// 微应用路由
const microAppRouter = [
    {
      name: "dev", //用于应用名   容器id   应用路由基地址
      url: "//localhost:8080", //应用路径（ip与端口）
      props: { propsName: "8080" }, //初始化时需要传递给微应用的数据
      // hidden: false,//是否启用该应用，默认false
      menuName: "dev",//自定义属性 根据需要自己配置（用在了菜单导航的名称）
    },
  ];
  export default microAppRouter;

配置函数文件 microAppSetting

// 引入路由
import microAppRouter from "./microAppRouter";
// 微应用配置
const microAppSetting = {};
export default microAppSetting;
/**
 * @description: 配置子应用
 * @param {*}
 * @return {*}
 */
microAppSetting.microApps = () => {
  let apps = [];
  microAppRouter.map((item) => {
    if (!item.hidden) {
      apps.push({
        name: item.name, //应用名(不可重复)
        entry: item.url, //默认加载应用路径(ip与端口)
        container: `#${item.name}`, //容器id
        activeRule: `/${item.name}`, //激活该应用的路径hash模式+#（子应用路由基地址）
        ...item,
      });
    }
  }); 
  return apps;
};

微应用出口文件 index.js

// 引入 qiankun  应用注册函数   开启函数
import { registerMicroApps, start } from "qiankun";
// 引入 微应用配置文件
import microAppSetting from "./microAppSetting";
//注册子应用
registerMicroApps(microAppSetting.microApps());
//开启
start({
    sandbox: { 
    strictStyleIsolation?: boolean, 
    // 开启严格的样式隔离模式。这种模式下 qiankun 会为每个微应用的容器包裹上一个 [shadow dom]节点，从而确保微应用的样式不会对全局造成影响。
    experimentalStyleIsolation?: boolean
    // 设置实验性的样式隔离特性，即在子应用下面的样式都会包一个特殊的选择器规则来限定其影响范围
     }
});

在App.vue内配置微应用容器及跳转菜单

<template>
 <div id="fapp">

    <!-- 主应用路由出口 -->
    <router-link to="/mian">主应用</router-link>
    <router-link
    v-for="(item,index) in microAppDom_Router"
    :key="index"
    :to="`/${item.name}`?${item.props?.propsName}"
    >{{ item.menuName }}</router-link>
    <router-view></router-view>

  </div>
</template>

<script>
// 引入子应用路由
import microAppRouter from "@/utils/microApp/microAppRouter";
export default {
  name: 'App',
  data() {
    return {
      microAppDom_Router: microAppRouter,
    };
  }
}
</script>

在main.js文件内引入微应用出口文件 index.js

import "@/utils/microApp/index";

7. 路由文件router.js

const router = new VueRouter({
	mode: "history",
	routes
})

子应用配置

在src中增加public-path.js文件

//public-path.js

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

在main.js文件内导出生命周期钩子

import Vue from 'vue'
import App from './App.vue'
import './public-path'
Vue.config.productionTip = false

let instance = null;
function render(props = {}) {
  const { container } = props;
  // Vue.use(router)
  instance = new Vue({
    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;
}

配置Webpack、跨域与端口号

const { defineConfig } = require('@vue/cli-service')
const { name } = require('./package');
module.exports = defineConfig({
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      //jsonpFunction: `webpackJsonp_${name}` // webpack5废弃jsonpFunction
      chunkLoadingGlobal: `webpackJsonp_${name}`, 
    },
  },
});

路由文件router.js

const router = new VueRouter({
  mode: "history",
  base: "/dev",
  routes,
});

报 ____webpack_public_path__未定义的问题
解决：
根据创建项目时选择的配置，在package.json文件内添加全局配置

module.exports = {
---
  globals: {
    __webpack_public_path__: "writable",
  },
---
};

报子应用接口404问题
解决：

主应用vue.config.js配置代理文章来源地址https://www.toymoban.com/news/detail-418486.html

module.exports = defineConfig({
---
  devServer: {
    proxy: {
      '/api1': { // 匹配所有以'/api1' 开头的请求路径
          target: 'http://localhost:8080/', // 代理目标的基础路径
          changeOrigin: true,
          pathRewrite: {'^/api1':''}
      }
  },
},
---
})

到了这里，关于微前端qiankun架构 (基于vue2实现)使用教程的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！