微前端框架qiankun应用及部署

主应用

1. 安装 qiankun

$ yarn add qiankun # 或者 npm i qiankun -S

2. 在主应用中注册微应用

main.js

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'qiankun-children', //子应用name 和 子应用package.json里"name": "qiankun-children"一致
    entry: '//localhost:8081',
    container: '#yourContainer',
    activeRule: '/dome1',//当配置为字符串时会直接跟 url 中的路径部分做前缀匹配,匹配成功表明当前应用会被激活,子应用router.js base: window.__POWERED_BY_QIANKUN__ ? '/dome1' : '/',
  },
]);

if (!window.qiankunStarted) {
  window.qiankunStarted = true;
  setTimeout(()=>{
    start(
        sandbox: {    //样式隔离
          strictStyleIsolation: true
        }
    );
  },2000)
}

vue.config.js 允许跨域处理


  devServer: {
    port: 8008,
    headers: {
      'Access-Control-Allow-Origin
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值