Vue 微前端架构设计实现代码 - 基于 Qiankun 框架

Vue\u7f51\u524d\u7aef\u67b6\u6784\u8bbe\u8ba1\u5b9e\u73b0\u4ee3\u7801\u5982\u4e0b\uff1a\n\n\u4e3b\u5e94\u7528\u4ee3\u7801\uff08main.js\uff09\uff1a\n\njavascript\nimport Vue from \'vue\';\nimport App from \'./App.vue\';\nimport router from \'./router\';\nimport store from \'./store\';\n\n// \u6ce8\u518c\u5b50\u5e94\u7528\nconst apps = [\n {\n name: \'app1\',\n entry: \'http://localhost:8081\',\n container: \'#subapp-container\',\n activeRule: \'/app1\',\n },\n {\n name: \'app2\',\n entry: \'http://localhost:8082\',\n container: \'#subapp-container\',\n activeRule: \'/app2\',\n },\n];\n\nconst microApps = [];\n\nfunction registerMicroApps() {\n apps.forEach((app) => {\n microApps.push(loadMicroApp(app));\n });\n}\n\nfunction loadMicroApp(app) {\n return {\n name: app.name,\n entry: app.entry,\n container: app.container,\n activeRule: app.activeRule,\n props: {\n router,\n store,\n },\n };\n}\n\nregisterMicroApps();\n\nnew Vue({\n router,\n store,\n render: (h) => h(App),\n}).$mount(\'#app\');\n\n\n\u5b50\u5e94\u7528\u4ee3\u7801\uff08\u5b50\u5e94\u7528\u7684\u5165\u53e3\u6587\u4ef6\uff0c\u5982app1.js\uff09\uff1a\n\njavascript\nimport Vue from \'vue\';\nimport App from \'./App.vue\';\nimport router from \'./router\';\nimport store from \'./store\';\n\nVue.config.productionTip = false;\n\nlet instance = null;\n\nfunction render(props = {}) {\n const { container } = props;\n instance = new Vue({\n router,\n store,\n render: (h) => h(App),\n }).$mount(container ? container.querySelector(\'#app\') : \'#app\');\n}\n\nif (!window.__POWERED_BY_QIANKUN__) {\n render();\n}\n\nexport async function bootstrap() {\n console.log(\'app1 bootstraped\');\n}\n\nexport async function mount(props) {\n console.log(\'app1 mount\', props);\n render(props);\n}\n\nexport async function unmount() {\n console.log(\'app1 unmount\');\n instance.$destroy();\n instance.$el.innerHTML = \'\';\n instance = null;\n}\n\n\njavascript\nimport Vue from \'vue\';\nimport App from \'./App.vue\';\nimport router from \'./router\';\nimport store from \'./store\';\n\nVue.config.productionTip = false;\n\nlet instance = null;\n\nfunction render(props = {}) {\n const { container } = props;\n instance = new Vue({\n router,\n store,\n render: (h) => h(App),\n }).$mount(container ? container.querySelector(\'#app\') : \'#app\');\n}\n\nif (!window.__POWERED_BY_QIANKUN__) {\n render();\n}\n\nexport async function bootstrap() {\n console.log(\'app2 bootstraped\');\n}\n\nexport async function mount(props) {\n console.log(\'app2 mount\', props);\n render(props);\n}\n\nexport async function unmount() {\n console.log(\'app2 unmount\');\n instance.$destroy();\n instance.$el.innerHTML = \'\';\n instance = null;\n}\n\n\n\u6ce8\u610f\uff1a\u4ee5\u4e0a\u4ee3\u7801\u662f\u57fa\u4e8eqiankun\u5fae\u524d\u7aef\u6846\u67b6\u5b9e\u73b0\u7684Vue\u5fae\u524d\u7aef\u67b6\u6784\u8bbe\u8ba1\uff0c\u9700\u8981\u5b89\u88c5qiankun\u4f9d\u8d56\u3002