微前端搭建子项目踩得坑（子应用挂载后容器不存在问题）

最新推荐文章于 2024-11-14 15:11:02 发布

骑着骆驼去看海

最新推荐文章于 2024-11-14 15:11:02 发布

阅读量4.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：微前端记录文章标签： javascript vue.js vue

本文链接：https://blog.youkuaiyun.com/qq_43743661/article/details/107979382

微前端记录专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用阿里qiankun框架搭建微前端项目，包括主项目与子应用的配置流程，解决了常见ID冲突问题，实现子应用间的无缝集成。

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

基于阿里的qiankun 框架搭建的微前端

1.先搭建主项目

先安装qiankun框架官网https://qiankun.umijs.org/zh/guide

cnpm i qiankun -S

1.在入口文件main.js添加配置

import { registerMicroApps, start } from 'qiankun'

const apps = [
  {
    name: 'vueApp', // 子应用的名称
    entry: '//localhost:9000', // 子应用的入口
    container: '#vue', // 子应用展示的容器
    activeRule: '/vue', // 子应用的router
    props: { a: 1 } // 父应用向子应用传递参数
  }
]

registerMicroApps(apps)
start({ prefetch: false, strictStyleIsolation: true })
// strictStyleIsolation css沙箱配置， prefetch 预加载配置

2.在布局layout文件下添加子应用容器

<el-menu :default-active="activeIndex" mode="horizontal" router>
  <el-menu-item index="/">基础的</el-menu-item>
  <el-menu-item index="/vue">vue</el-menu-item>
</el-menu>
<router-view/>
<div id="vue"></div>

2.子应用配置

1.使用qiankun，主应用必须接受三个函数，在main.js里面添加，并且判断是独立运行还是在主项目中引用

let instance = null
const render = (props) => {
  instance = new Vue({
    router,
    render: h => h(App)
  }).$mount('#vue-app');
}

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}
if (!window.__POWERED_BY_QIANKUN__) { // 默认独立运行
  render();
}

// 子组件的协议就ok了
export async function bootstrap(props) {

};
export async function mount(props) {
  console.log(props)
    render(props)
}
export async function unmount(props) {
    instance.$destroy();
}

2.路由里面添加前缀

const router = new VueRouter({
  mode: 'history',
  base: window.__POWERED_BY_QIANKUN__ ? "/vue" : "/",
  routes
})

3.配置文件vue.config.js添加容许跨域配置headers

module.exports = {
  devServer: {
    port: 9000,
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  },
  configureWebpack: {
    output: {
      library: 'vueApp',
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_vueApp`,
    }
  }
}

到此基本的项目已经搭建完成了，但是我在项目中遇到一个重要的坑就是，点击vue 在这里插入图片描述
包承载子项么的容器丢失
重点(坑)
原因是因为主项目和子项目都是用id为app，造成子项目直接挂在在app上，导致主项目里面承载子项目的容器丢失，此时应当改子项目的id

// app.vue
<div id="vue-app">
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <div>header</div>
  <div>第一次提交</div>
  <router-view/>
</div>
// index.html
<noscript>
  <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="vue-app"></div>