京东开源项目micro-app初体验

最新推荐文章于 2025-05-06 12:00:05 发布

辣鸡队员

最新推荐文章于 2025-05-06 12:00:05 发布

阅读量5.4k

点赞数

分类专栏：微前端 vue踩坑文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44000859/article/details/122451017

版权

本文介绍了一个由京东开源的微前端框架micro-app，通过组件形式引入子项目，实现微前端方案。文章详细记录了安装配置过程及遇到的问题，如子项目与高德地图集成时的报错等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于micro-app

2021年7月由京东开源的微前端框架
官方文档
 micro-appgit地址
 了解micro-app

一、micro-app使用版本以及使用场景？

这段不重要可跳过

版本：0.8.0

使用背景：目前所在的公司存在多个项目共用同一个模块的情况，比如有A,B,C三个项目，这三个项目中有一部分页面是完全相同的，我们不希望去重复开发同一个模块，于是领导提出将重复的页面单独提取出来成为独立的项目单独部署，这个项目单独拿出来也可以成为一个合格的项目，并且A,B,C三个项目中可以使用iframe进行内嵌，但是我始终觉得iframe不算是好的解决方案，比如多个滚动条的问题，弹窗不能覆盖全局的问题，以及项目加载使用了NProgress，加载iframe的时候会在页面上显示这个进度条

我的想法：我希望实现的效果是子项目起码看起来就像是父项目自己的页面一样，于是最初我选择使用vue-cli提供的远程组件，将页面打包成组件，放到服务器上，父项目引入必要的文件地址，挂载组件

父项目index.html
<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <link rel="stylesheet" href="http://你的ip:端口/v2/yczjTest/pageTest.css">
        <link rel="stylesheet" href="http://你的ip:端口/nj/packages/packages.css">
        <title>xxx平台</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
    <script src="https://unpkg.com/vue

最低0.47元/天解锁文章