qiankun微前端学期本地部署自我总结

最新推荐文章于 2025-07-16 09:56:02 发布

习惯....

最新推荐文章于 2025-07-16 09:56:02 发布

阅读量196

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/Fidgety/article/details/129725131

本文介绍了使用qiankun微前端框架进行本地部署的过程，包括主应用的依赖安装、子应用目录结构设置、子应用的main.js、router和vue.config.js的配置详情。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主应用：

1.安装依赖：npm i qiankun -S

2.src下建立micros文件夹，app.js(子应用注册列表),index.js(注册启动微应用)

2.1 定义一个列表写入要注册的app

在这里插入图片描述

2.2 初始化主应用配置：

在这里插入图片描述

子应用：

1.main.js配置

在这里插入图片描述

2.router路由配置

在这里插入图片描述

3.vue.config.js配置

3.1 本地：

    disableHostCheck: true,
    // 配置跨域请求头，解决开发环境的跨域问题
    headers: {
      "Access-Control-Allow-Origin": "*",
    },

3.2打包：


```javascript
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src"),
      },
    },
    output: {
      // 微应用的包名，这里与主应用中注册的微应用名称一致
      library: "vue-micro-app",
      // 将你的 library 暴露为所有的模块定义下都可运行的方式
      libraryTarget: "umd",
      // 按需加载相关，设置为 webpackJsonp_VueMicroApp 即可
      jsonpFunction: `webpackJsonp_vue-micro-app`,
    },
  },




# 数据交互方法
## (1)使用localStorage/sessionStorage将数据存储域上 进行交互
## (2)通过路由参数共享
## (3)使用props传输数据，子应用在mount周期上获取
## (4)官方提供的 actions
1、onGlobalStateChange: (callback: OnGlobalStateChangeCallback, fireImmediately?: boolean) => void， 在当前应用监听全局状态，有变更触发 callback，fireImmediately = true 立即触发 callback

2、setGlobalState: (state: Record<string, any>) => boolean， 可以在应用中任何地方调用来修改全局状态，子应用想使用的话可以通过 props 把 action 传给子应用使用

3、offGlobalStateChange: () => boolean，移除当前应用的状态监听，微应用 umount 时会默认调用

# 遇到问题：
	微应用的项目id 不能相同 不然微应用渲染不会显示在主应用的容器中
[数据交互：](https://blog.youkuaiyun.com/weixin_43972437/article/details/128154083)