网站首页 > 技术文章 正文
感谢蚂蚁金服出品qiankun(乾坤)
一 :下载模板
地址
https://github.com/umijs/qiankun
$ git cloen git@github.com:umijs/qiankun.git
$ cd qiankun
$ yarn
$ yarn examples:install
$ yarn examples:start
以上步骤启动模板项目
二:子项目webpack配置
putput.library必须和注册name一致
// 自定义webpack配置
configureWebpack: {
resolve: {
alias: {
'@': resolve('src'),
},
},
output: {
// 把子应用打包成 umd 库格式
library: `react16`,//此处名字必须和注册时的name一致
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${name}`,
},
},
如果提示跨域的话需在子页面的webpack中配置允许跨域,或者打包后部署服务器允许跨域
devServer: {
hot: true,
disableHostCheck: true,
port,
overlay: {
warnings: false,
errors: true,
},
headers: {
'Access-Control-Allow-Origin': '*',//允许跨域
},
},
以上配置完成后就可以开启微前端的入门啦!!!
- 上一篇: 聊个5毛,微前端探坑
- 下一篇: 微前端效能工程:从研发提效到质量内建
猜你喜欢
- 2025-04-29 从单体应用到微前端:前端领域的新趋势
- 2025-04-29 微格式:为 Web 内容赋予语义的力量
- 2025-04-29 微前端效能工程:从研发提效到质量内建
- 2025-04-29 聊个5毛,微前端探坑
- 2025-04-29 前端面试-微前端架构中,一般是如何做到 JavaScript 隔离的?
- 2024-09-10 考虑使用微前端的10个理由
- 2024-09-10 了解React的微前端
- 2024-09-10 微前端架构技术解析
- 2024-09-10 从0到1落地微前端架构, MicroApp实战招聘网站(分享)
- 2024-09-10 深度:从零编写一个微前端框架
你 发表评论:
欢迎- 最近发表
-
- 前端流行框架Vue3教程:13. 组件传递数据_Props
- 前端必看!10 个 Vue3 救命技巧,解决你 90% 的开发难题?
- JAVA和JavaScript到底是什么关系?是亲戚吗?
- Java和js有什么区别?(java和javascript的区别和联系)
- 东方标准|Web和Java的区别,如何选择这两个专业
- 前端面试题-JS 中如何实现大对象深度对比
- 360前端一面~面试题解析(360前端笔试)
- 加班秃头别慌!1 道 Vue 面试题,快速解锁大厂 offer 通关密码
- 焦虑深夜刷题!5 道高频 React 面试题,吃透 offer 稳了
- 2025Web前端面试题大全(整理版)面试题附答案详解,最全面详细
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端md5加密 (49)
- 前端路由 (55)
- 前端数组 (65)
- 前端定时器 (47)
- 前端懒加载 (45)
- 前端接口 (46)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle查询数据库 (45)
- oracle约束 (46)
- oracle 中文 (51)
- oracle链接 (47)
- oracle的函数 (57)
- mac oracle (47)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)