搭配 umijs+vue的项目实战 以umijs为主应用+vue微应用

搭配 umijs+vue的项目实战 以umijs为主应用+vue微应用

1、首先我们需要在项目中下载qiankun	

yarn命令 ： yarn add @umijs/plugin-qiankun -D
npm 命令 ：npm  i plugin-qiankun -S

umi.js配置qiankun

**第一步：**注册子应用 在.umirc.ts增加qiankun的配置项

如果你的项目page跟目录下存在document.ejs文件 需要把原有的div root注释

**第二步：**装载子应用 在 .umirc.ts routes配置

这里我们需要注意的是 name属性和microApp属性 保持跟注册子应用时的name属性一致
然后在项目根目录下创建app.ts

umi3qinakun配置参考文档
****

Vue2.x微应用

以 vue-cli 3+ 生成的 vue 2.x 项目为例
首先我们需要在src目录下新增 public-path.js

2入口文件 main.js 修改，为了避免根 id #app 与其他的 DOM 冲突，需要限制查找范围。

3打包配置修改（vue.config.js）