{"id":43733509,"url":"https://github.com/justwiner/microfront-end-single-spa","last_synced_at":"2026-02-05T10:34:57.531Z","repository":{"id":37819567,"uuid":"200197041","full_name":"justwiner/microfront-end-single-spa","owner":"justwiner","description":"利用single-spa搭建的一个微前端架构，其中各个小型应用具有独立部署、独立运行、允许存在独立仓储的特性。由portal项目实现各个应用的组合","archived":false,"fork":false,"pushed_at":"2023-01-14T00:53:30.000Z","size":2980,"stargazers_count":62,"open_issues_count":83,"forks_count":26,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-05-27T17:15:09.487Z","etag":null,"topics":["html","js","react","singlespa","vue"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/justwiner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-02T08:29:15.000Z","updated_at":"2024-04-12T05:05:25.000Z","dependencies_parsed_at":"2023-02-09T18:16:55.778Z","dependency_job_id":null,"html_url":"https://github.com/justwiner/microfront-end-single-spa","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/justwiner/microfront-end-single-spa","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justwiner%2Fmicrofront-end-single-spa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justwiner%2Fmicrofront-end-single-spa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justwiner%2Fmicrofront-end-single-spa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justwiner%2Fmicrofront-end-single-spa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/justwiner","download_url":"https://codeload.github.com/justwiner/microfront-end-single-spa/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justwiner%2Fmicrofront-end-single-spa/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29119232,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-05T09:40:36.738Z","status":"ssl_error","status_checked_at":"2026-02-05T09:36:49.977Z","response_time":65,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","js","react","singlespa","vue"],"created_at":"2026-02-05T10:34:57.317Z","updated_at":"2026-02-05T10:34:57.518Z","avatar_url":"https://github.com/justwiner.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# microfront-end-single-spa\n利用single-spa搭建的一个微前端架构，其中各个小型应用具有独立部署、独立运行、允许存在独立仓储的特性。由portal项目实现各个应用的组合\n\n# 主要技术\n1. single-spa\n2. systemJs\n\n# 项目结构\n1. menu项目，开发框架`react`\n2. portal项目，`组件调度、路由分发`\n3. project1项目，开发框架`react`\n4. project2项目，开发框架`vue`，由`vue-cli3脚手架生成`\n\n# 项目介绍\n## menu项目\n1. 基于`react`框架，自定义webpack打包配置\n2. 集成`antd-design`\n## portal项目\n1. 不依赖三大框架，自定义webpack打包配置\n2. 集成`systemJS`，用于引入子模块打包后的js文件(例如`bundle.js`)\n3. 提供路由分发功能，具体请见`/portal/src/config`和`/portal/src/activityFns`，用于控制懒加载模块js文件，例跳转到project2项目时，才开始加载project2打包后的js文件\n4. 提供页面容器，可以理解成最外层门户，详情请见`/portal/src/index.html`；预定义子模块的打包js文件，引入公共模块依赖，子模块不需要自己单独打包，例如react、vue、axios等开源框架；提供HTML容器\n```\n\u003cdiv id='menu'\u003e\u003c/div\u003e\n\u003cdiv id='content'\u003e\n    \u003cdiv id=\"react\"\u003e\u003c/div\u003e\n    \u003cdiv id=\"vue\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n## project1项目\n1. 基于`react`框架，自定义webpack打包配置\n2. 集成`react-router-dom`，实现路由与页面组件的绑定\n## project2项目\n1. 基于`vue-cli3`生成的VUE项目，引入了`single-spa`，即在`vue-cli3`项目基础上执行了`vue add single-spa`\n2. 集成了`vuex、vue-router、axios、element-ui`\n\n# 基于portal整合的完整运行步骤\n1. 开启`公共依赖模块的服务`，我的公共依赖模块在portal项目下common-deps-static文件夹中，只需要在这个文件夹下开启服务即可，可以通过http-server插件，端口设置为`8000`，并且设置跨域`--cors`\n2. 在`portal`项目下，执行命令`npm run start`\n3. 在`project2、menu、project1`项目下，分别执行命令`npm run dev`\n4. chrome中打开页面：`http://localhost:8233/`即可\n\n# 各个子模块单独启动\n由于DEMO中，业务模块就`menu、project1、project2`，因此，只对这三个项目进行了webpack打包配置\n1. 启动本地开发模式（适用于：`menu、project1、project2`）,都是相同的命令：`npm run dev:local`\n\n# 提示（TIP）\n1. 很多同学说启动单个项目的时候，控制台报错，`define is not defined`，  \n这个是因为，在基于portal整合的启动模式下：`npm run dev`，project2(Vue)的打包成umd模式的，project1、menu是打包成amd模式，且只是一个单独的js文件，这样通过各自启动的IP端口打开页面是会报错的，浏览器解析不了这种JS模块，需要portal项目的systemjs来引入，而且`npm run dev`执行后，并没有生成index.html，更不可能打开页面。  \n因此要单独启动小模块，请运行`npm run dev:local`,或参考`package.json`中的启动命令\n\n# 预告\n后续将在子模块中尝试集成各种优秀开源框架，探索single-spa到底有多大的利用价值！  \n能否应用到正式的大型超大型项目中？  \n优化微服务架构，达到开箱即用。","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustwiner%2Fmicrofront-end-single-spa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjustwiner%2Fmicrofront-end-single-spa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustwiner%2Fmicrofront-end-single-spa/lists"}