网站网络推广运营,网站如何提升用户体验,家居饰品网站建设论文,辽宁省住房和城乡建设厅网站首页微前端是什么#xff1f;
微前端就是页面的某个功能可以独立为一个项目进行开发、部署。比如#xff1a;自己的项目使用iframs引入百度
qiankun
qiankun是一个基于single-spa的微前端实现库#xff0c;qiankun 对于用户而言只是一个类似 jQuery 的库#xff0c;你需要调…微前端是什么
微前端就是页面的某个功能可以独立为一个项目进行开发、部署。比如自己的项目使用iframs引入百度
qiankun
qiankun是一个基于single-spa的微前端实现库qiankun 对于用户而言只是一个类似 jQuery 的库你需要调用几个 qiankun 的 API 即可完成应用的微前端改造
主应用
安装qiankun
npm i qiankun -S 主应用配置
在webpack入口js文件中引入qiankun方法注入。
//qiankun配置
import { registerMicroApps, start } from qiankun;//子应用列表
let apps [{name:subapp,entry://localhost:8080,//子应用的地址这里演示是本地启动的地址。container:#app,//子应用的容器节点的选择器vue一般为appactiveRule:/subapp,//访问子应用的规则比如主应用为localhost:8081那访问该子应用的url应为localhost:8081/subapp}
]//注册子应用
registerMicroApps(apps);//启动
start();子应用配置
src中创建public-path.js文件
//public-path.jsif (window.__POWERED_BY_QIANKUN__) {__webpack_public_path__ window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}main.js 中加入子应用生命周期函数统一调用
import Vue from vue
import App from ./App.vueVue.config.productionTip falselet instance null;
function render(props {}) {const { container } props;instance new Vue({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;
}解决跨域问题
子应用和主应用为两个服务分别在两个端口要想通过主应用访问子应用的资源必定会存在跨域问题 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},},
};
