江苏龙网

  1. 首页 > 资讯 > 科技 > >

|公司前端代码，俺很懂( 二 )



//子应用盒子
5、最后将init.js在main.js引入
import startQiankun from './qiankun/init/index' let app = null async function render({ appContent, loading } = {}) { if (!app) { await ReadConfig(Vue)//加载配置文件 app = new Vue({ router, store, i18n, render: h => h(App), }).$mount('#app') } else { // app.content = appContent; // app.loading = loading; console.log(loading, appContent) } } render() startQiankun()构建子应用
1、使用vue脚手架初始化项目
2、在main.js中加入：
let router = null; let instance = null; if (window.__POWERED_BY_QIANKUN__) { //处理资源 __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; } //下面的 /admin与主应用registerMicroApps 中的activeRule 字段对应 function render(props = {}) { const {container} = props router = new VueRouter({ base: window.__POWERED_BY_QIANKUN__ ? '/admin' : '/', mode: 'history', routes, }); const create = async () => { // await ReadConfig(Vue) instance = new Vue({ router, render: h => h(App), }).$mount(container ? container.querySelector('#app') : '#app'); } create() } if (!window.__POWERED_BY_QIANKUN__) {//判断是否在qiankun环境下 render(); } // 导出子应用生命周期 挂载前 export async function bootstrap(props) { console.log('[vue] vue app bootstraped'); } export async function mount(props) {// 导出子应用生命周期 挂载前 挂载后 render(props); }// 导出子应用生命周期 挂载前 卸载后 export async function unmount() { instance.$destroy(); instance = null; router = null; }3、创建vue.config.js文件,需要做一些打包配置 。
const path = require('path'); const packageName = require('./package').name; function resolve(dir) { return path.join(__dirname, dir); } const dev = process.env.NODE_ENV === 'development' const port = 9528; // dev port module.exports = { publicPath: dev ? `//localhost:${port}` : '/', outputDir: 'dist', assetsDir: 'static', filenameHashing: true, devServer: { hot: true, historyApiFallback: true, port, overlay: { warnings: false, errors: true, }, headers: { 'Access-Control-Allow-Origin': '*', }, }, // 自定义webpack配置 configureWebpack: { resolve: { alias: { '@': resolve('src'), }, }, output: {// 把子应用打包成 umd 库格式 library: `${packageName}-[name]`, libraryTarget: 'umd', jsonpFunction: `webpackJsonp_${packageName}`, globalObject: 'this', }, }, };2、微前端解决的问题
自此 ， 一个父子前端微应用搭建成功 ， 当然这只是简单的vue实现 ， 真正复杂的是一个项目中每个模块使用不同的前端框架 。 效果如下：
|公司前端代码，俺很懂
本文插图

我们可以看到A模块、B模块和C模块三个微应用分别运行在Vue、React和Angular的环境中 ， 而主应用主要提供了NavBar和SideBar的界面 。 中心是微应用中组件显示的界面 。
我们从图中可以看出将前端微服务化后解决了什么问题：
1、当A模块需要维护时 ， 只需要动A模块的代码 ， 维护完成之后对A项目进行构建发布 ， 由于体积很小 ， 构建发布就很快 。
2、当A项目构建发布时 ， 其他应用运行正常 ， 避免了之前单体应用构建发布导致整个前端项目无法访问 。
3、主应用可以捕捉到子应用的运行状态 ， 如果子应用出现异常或者挂掉 ， 可以对用户进行友好提示 。 例如当A模块挂掉后 ， 用户点击其功能一将提示“功能正在维护中” 。


推荐阅读


上一篇：AI烽火|物流共享那些事，你了解多少？

下一篇：成都商报红星新闻|“618”没买够？“718”中国西博嗨购节奉上7倍嗨购时长！