{"id":19069623,"url":"https://github.com/srect/qiankun-demo","last_synced_at":"2026-06-29T14:31:57.213Z","repository":{"id":114172964,"uuid":"341615342","full_name":"sRect/qiankun-demo","owner":"sRect","description":"qiankun demo","archived":false,"fork":false,"pushed_at":"2021-03-26T10:09:09.000Z","size":621,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-22T03:41:58.822Z","etag":null,"topics":[],"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/sRect.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-02-23T16:21:36.000Z","updated_at":"2021-02-25T08:43:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"013b826d-ba88-4d87-81b7-045bef2d1393","html_url":"https://github.com/sRect/qiankun-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sRect/qiankun-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sRect%2Fqiankun-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sRect%2Fqiankun-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sRect%2Fqiankun-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sRect%2Fqiankun-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sRect","download_url":"https://codeload.github.com/sRect/qiankun-demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sRect%2Fqiankun-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34931587,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-29T02:00:05.398Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-11-09T01:14:58.166Z","updated_at":"2026-06-29T14:31:57.188Z","avatar_url":"https://github.com/sRect.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## qiankun demo\n\u003e 1. [qiankun官方文档](https://qiankun.umijs.org/zh)\n\u003e 2. [single-spa](https://zh-hans.single-spa.js.org/docs/getting-started-overview/)\n\u003e 3. [微前端-最容易看懂的微前端知识](https://juejin.cn/post/6844904162509979662#heading-0)\n\n微前端的类型：\n\n1. 受路由控制渲染的子应用\n2. 不受路由控制的组件\n3. 非渲染组件，应用间通信逻辑\n\n### 1.子应用-vue\n\n#### 1. vue-cli创建子应用\n```shell\nvue create qiankun_vue\n```\n#### 2. 修改入口`main.js`文件\n```javascript\n// https://qiankun.umijs.org/zh/guide/tutorial#vue-微应用\nimport Vue from 'vue'\nimport App from './App.vue'\nimport router from './router'\n\n// Vue.config.productionTip = false\n\nlet vueInstance = null;\nfunction render(props = {}) {\n  const { container } = props;\n\n  vueInstance = new Vue({\n    router,\n    render: h =\u003e h(App)\n    // 这里是挂载到自己的html上，基座会拿到这个挂载后的html，将其插入到相应的容器里\n\n    // Application died in status NOT_MOUNTED: Target container with #container not existed after xxx mounted!\n    // 微应用的根 id 与其他 DOM 冲突。解决办法是：修改根 id 的查找范围。\n  }).$mount(container ? container.querySelector('#app') : '#app'); \n}\n\n// 使用 webpack 运行时 publicPath 配置\n// 动态设置publicPath\nif (window.__POWERED_BY_QIANKUN__) {\n  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;\n}\n\n// https://qiankun.umijs.org/zh/faq#如何独立运行微应用？\nif (!window.__POWERED_BY_QIANKUN__) {\n  render();\n}\n\n// 暴露3个异步方法 bootstrap mount unmount\nexport async function bootstrap(props) { }\nexport async function mount(props) { \n  console.log('props=====\u003e', props)\n  render(props);\n}\nexport async function unmount(props) {\n  vueInstance \u0026\u0026 vueInstance.$destroy();\n}\n```\n\n#### 3. 修改路由`router/index.js`文件\n```diff\n  const router = new VueRouter({\n    mode: 'history',\n-    base: process.env.BASE_URL,\n+    base: window.__POWERED_BY_QIANKUN__ ? '/vue' : process.env.BASE_URL,\n    routes\n  })\n\n```\n\n#### 4. 根目录新建`vue.config.js`，修改打包配置\n```javascript\nmodule.exports = {\n  devServer: {\n    port: 8000,\n    headers: {\n      'Access-Control-Allow-Origin': '*'\n    }\n  },\n  // https://webpack.docschina.org/configuration/output/#outputlibrary\n  configureWebpack: {\n    output: {\n      library: 'vueApp', // 打包成一个类库\n      libraryTarget: 'umd' // umd最终会把bootstrap/mount/unmount挂载到window上\n    }\n  }\n}\n```\n\n### 2.子应用-react\n#### 1. create-react-app创建子应用\n```\ncreate-react-app qiankun_react\n```\n\n#### 2. 修改入口`index.js`文件\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { BrowserRouter, Link, Route } from 'react-router-dom';\nimport './index.css';\nimport App from './App';\n// import reportWebVitals from './reportWebVitals';\n\nfunction render(props) {\n  const { container } = props;\n  // https://reactrouter.com/web/api/BrowserRouter\n  ReactDOM.render(\n    \u003cReact.StrictMode\u003e\n      \u003cBrowserRouter basename=\"/react\"\u003e\n        \u003cLink to=\"/\"\u003ereact-home\u003c/Link\u003e | \n        \u003cLink to=\"/about\"\u003ereact-about\u003c/Link\u003e\n\n        {/* exact 严格模式 */}\n        \u003cRoute path=\"/\" exact render={() =\u003e \u003cApp /\u003e}\u003e\u003c/Route\u003e\n        \u003cRoute path=\"/about\" exact render={() =\u003e \u003cdiv\u003ereact about page\u003c/div\u003e}\u003e\u003c/Route\u003e\n      \n      \u003c/BrowserRouter\u003e\n    \u003c/React.StrictMode\u003e,\n    container ? container.querySelector('#root') : document.querySelector('#root')\n  );\n}\n\n// 独立运行\nif(!window.__POWERED_BY_QIANKUN__) {\n  render();\n}\n\nexport async function bootstrap(props) { }\nexport async function mount(props) {\n  render(props);\n}\nexport async function unmount(props) {\n  const { container } = props;\n  ReactDOM.unmountComponentAtNode(container ? container.querySelector('#root') : document.querySelector('#root'));\n}\n```\n\n#### 3. 修改打包配置文件\n##### 1. 安装`react-app-rewired`\n```shell\nyarn add react-app-rewired -D\n```\n##### 2. 子应用根目录新建`config-overrides.js`文件\n```javascript\n// https://github.com/timarney/react-app-rewired/blob/HEAD/README_zh.md#扩展配置选项\nmodule.exports = {\n  webpack: config =\u003e {\n    config.output.library = 'reactApp';\n    config.output.libraryTarget = 'umd';\n    config.output.publicPath = 'http://localhost:9000/';\n    return config;\n  },\n  devServer: configFunc =\u003e {\n    return (proxy, allowedHost) =\u003e {\n      const config = configFunc(proxy, allowedHost);\n      // 设置开发服务允许跨域\n      config.headers = {\n        'Access-Control-Allow-Origin': '*'\n      }\n\n      return config;\n    }\n  }\n}\n```\n\n##### 3. 设置环境变量\n1. 子应用根目录新建`.env`文件\n```\nPORT=4000\nWDS_SOCKET_PORT=4000\n```\n或者在`package.json`启动脚本中修改端口\n```diff\n \"scripts\": {\n-     \"start\": \"react-app-rewired start\",\n+     \"start\": \"set PORT=4000 \u0026\u0026 react-app-rewired start\",\n   },\n```\n\n2. 修改`package.json`文件\n```diff\n \"scripts\": {\n-     \"start\": \"react-scripts start\",\n-     \"build\": \"react-scripts build\",\n-     \"test\": \"react-scripts test\",\n-     \"eject\": \"react-scripts eject\"\n+     \"start\": \"react-app-rewired start\",\n+     \"build\": \"react-app-rewired build\",\n+     \"test\": \"react-app-rewired test\",\n+     \"eject\": \"react-app-rewired eject\"\n   },\n```\n\n### 3.子应用(非webpack构建)-jquery+bootstrap\n#### 1. 新建`index.html`文件\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"zh-CN\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"utf-8\"\u003e\n  \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n  \u003ctitle\u003eBootstrap 101 Template\u003c/title\u003e\n  \u003clink href=\"//localhost:5000/lib/bootstrap.min.css\" rel=\"stylesheet\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv class=\"container\" id=\"app\"\u003e\n    \u003ch1\u003e你好，世界！\u003c/h1\u003e\n    \u003cdiv class=\"row\"\u003e\n      \u003cdiv class=\"input-group\"\u003e\n        \u003cspan class=\"input-group-addon\" id=\"basic-addon1\"\u003e@\u003c/span\u003e\n        \u003cinput type=\"text\" class=\"form-control\" placeholder=\"Username\" aria-describedby=\"basic-addon1\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cscript src=\"//localhost:5000/lib/jquery.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"//localhost:5000/lib/bootstrap.min.js\"\u003e\u003c/script\u003e\n  \u003c!--  entry js为入口文件 --\u003e\n  \u003cscript src=\"//localhost:5000/entry.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n#### 2. 新建`entry.js`入口文件\n```javascript\nconst render = ($) =\u003e {\n  $('#purehtml-container').html(\"Hello, render with jQuery\");\n  return Promise.resolve();\n}\n(global =\u003e {\n  global['purehtml'] = {\n    bootstrap: () =\u003e {\n      console.log('purehtml bootstrap');\n      return Promise.resolve();\n    },\n    mount: () =\u003e {\n      console.log('purehtml mount');\n      return render($);\n    },\n    unmount: () =\u003e {\n      console.log('purehtml unmount');\n      return Promise.resolve();\n    },\n  };\n})(window);\n```\n### 4.基座应用-vue\n#### 1.修改入口`main.js`文件\n```diff\nimport Vue from 'vue'\nimport App from './App.vue'\nimport router from './router'\n+ import { registerMicroApps, start } from 'qiankun';\n+ import ElementUI from 'element-ui';\n+ import 'element-ui/lib/theme-chalk/index.css';\n\nVue.config.productionTip = false\n\n+ Vue.use(ElementUI);\n\n+ const apps = [\n+   {\n+     name: \"vueApp\",\n+     // 默认通过fetch加载这个html，解析里面的js，动态的执行\n+     // 注意：子应用必须支持跨域\n+     entry: \"http://localhost:8000\",\n+     container: \"#vueDOM\", // 容器名\n+     activeRule: \"/vue\", // 激活路径\n+     props: { a: 1, b: 2 }, // 传给子应用的参数\n+   },\n+   {\n+     name: \"reactApp\",\n+     entry: \"//localhost:9000\",\n+     container: \"#react\",\n+     activeRule: \"/react\",\n+   },\n+   {\n+     name: \"jqueryApp\",\n+     entry: \"//localhost:5000\",\n+     container: \"#jquery\",\n+     activeRule: \"/jquery\",\n+     props: { a: 100, b: 200 },\n+   },\n+ ];\n+ \n+ registerMicroApps(apps); // 注册应用\n+ // 启动应用\n+ start({\n+   // https://qiankun.umijs.org/zh/api#startopts\n+   prefetch: false, // 取消预加载\n+ });\n\nnew Vue({\n  router,\n  render: h =\u003e h(App)\n}).$mount('#app')\n```\n#### 2. 修改`App.vue`组件\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n      \u003cel-menu :router=\"true\"  mode=\"horizontal\"\u003e\n        \u003c!-- 基座自己的路由 --\u003e\n        \u003cel-menu-item index=\"/\"\u003ebase-home\u003c/el-menu-item\u003e\n        \u003cel-menu-item index=\"/about\"\u003ebase-about\u003c/el-menu-item\u003e\n        \u003c!-- 引用其他子应用 --\u003e\n        \u003cel-menu-item index=\"/vue\"\u003evue 应用\u003c/el-menu-item\u003e\n        \u003cel-menu-item index=\"/react\"\u003ereact 应用\u003c/el-menu-item\u003e\n        \u003cel-menu-item index=\"/jquery\"\u003ejquery + bootstrap 应用\u003c/el-menu-item\u003e\n      \u003c/el-menu\u003e\n\n      \u003crouter-view/\u003e\n\n      \u003cdiv id=\"vueDOM\"\u003e\u003c/div\u003e\n      \u003cdiv id=\"react\"\u003e\u003c/div\u003e\n      \u003cdiv id=\"jquery\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrect%2Fqiankun-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsrect%2Fqiankun-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrect%2Fqiankun-demo/lists"}