qiankun-新建一个微前端项目

本地是vue环境，所以拿vue项目练习。
1、创建一个父项目，两个子项目
vue create parent
vue create children-one
vue create children-two
2、打开主项目，引入qiankun
cd parent
npm i qiankun -S

这里我遇到了问题，
PS C:\Users\admin\Desktop\qiankun\parent> npm i qiankun -S
npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ECONNRESET: request to https://registry.npmjs.org/qiankun failed, reason: read ECONNRESET
npm WARN registry Using stale data from https://registry.npmjs.org/ due to a request error during revalidation.
npm ERR! cb() never called!

npm ERR! This is an error with npm itself. Please report this error at:
npm ERR! https://npm.community

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\admin\AppData\Roaming\npm-cache_logs\2024-12-10T01_16_50_824Z-debug.log
PS C:\Users\admin\Desktop\qiankun\parent> npm i qiankun -S
npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ETIMEDOUT: request to https://registry.npmjs.org/@parcel%2Fwatcher-darwin-arm64 failed, reason: connect ETIMEDOUT 104.16.3.35:443
npm WARN registry Using stale data from https://registry.npmjs.org/ due to a request error during revalidation.
npm ERR! cb() never called!

npm ERR! This is an error with npm itself. Please report this error at:
npm ERR! https://npm.community

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\admin\AppData\Roaming\npm-cache_logs\2024-12-10T01_43_00_190Z-debug.log****
度娘说是node版本问题，查看本地node版本 node -v，是v14.17.6。公司电脑限制太多，先存一下，下班用自己电脑试。

---

接上回，实践证明不也是node版本问题，是公司网络不行，之前的步骤没有问题。

接下来配置主应用：
main.js加入代码
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
{
name: 'vueApp',
entry: '//localhost:8080',
container: '#container',
activeRule: '/app-vue',
},
]);
// 启动 qiankun
start();

这里注意实际项目name、entry、container、activeRule需要自己定义。entry对应子应用路由port，container对应主应用设置的子应用容器标签id，activeRule对应子应用main.js的base。

路由配置index.js加入子应用路由配置

const routes = [
{
path: "/child",
name: "child",
},
];

app.vue定义子应用容器

主应用配置完成。

配置子应用：

1、在 src 目录新增 public-path.js：

if (window.POWERED_BY_QIANKUN) {
webpack_public_path = window.INJECTED_PUBLIC_PATH_BY_QIANKUN;
}

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

import './public-path';
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import routes from './router';
import store from './store';

Vue.config.productionTip = false;

let router = null;
let instance = null;
function render(props = {}) {
const { container } = props;
router = new VueRouter({
base: window.POWERED_BY_QIANKUN ? '/app-vue/' : '/',
mode: 'history',
routes,
});

instance = new Vue({
router,
store,
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;
router = null;
}

这里注意一下routes，默认vuecli生成的路由index.js export的是new VueRouter，这里要手动修改一下路由index.js，只保留路由对象，并且export它。

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

const { name } = require('./package');
module.exports = {
devServer: {
headers: {
'Access-Control-Allow-Origin': '*',
},
},
configureWebpack: {
output: {
library: ${name}-[name],
libraryTarget: 'umd', // 把微应用打包成 umd 库格式
jsonpFunction: webpackJsonp_${name}, // webpack 5 需要把 jsonpFunction 替换成 chunkLoadingGlobal
},
},
};

这里注意jsonpFunction，正好我的项目是webpack 5，所以实际代码我是改成了chunkLoadingGlobal。

到这里基础配置就完成了。

参考资料——https://qiankun.umijs.org/、https://qiankun.umijs.org/zh/guide/tutorial

---

接上回。主应用与微应用之间传值。
1、props
主应用配置路由的时候直接加入参数props
registerMicroApps([
{
name: 'vueApp',
entry: '//localhost:8080',
container: '#container',
activeRule: '/app-vue',
props: {
someData: '你要传递的数据',
},
},
]);

子应用初始化时接收
function render(props = {}) {
const { someData } = props;
console.log(someData); // 输出主应用传递的数据
const { container } = props;
router = new VueRouter({
base: window.POWERED_BY_QIANKUN ? '/app-vue/' : '/',
mode: 'history',
routes,
});

instance = new Vue({
router,
store,
render: (h) => h(App),
}).$mount(container ? container.querySelector('#app') : '#app');
}