在线作图网站,重庆头条新闻,如何在阿里巴巴做网站,做网站和开发app有什么不同需求#xff1a;做一个vue2的微前端#xff0c;以vue2为主应用#xff0c;其他技术栈为子应用#xff0c;比如vue3#xff0c;本文章只是做vue2一套的微前端应用实现#xff0c;之后解决的一些问题。vue3子应用可以看我另一篇vue3vitets实现qiankun微前端子应用-CSDN博客… 需求做一个vue2的微前端以vue2为主应用其他技术栈为子应用比如vue3本文章只是做vue2一套的微前端应用实现之后解决的一些问题。vue3子应用可以看我另一篇vue3vitets实现qiankun微前端子应用-CSDN博客 1.什么是微前端个人理解 比如现在的vue项目是一个整体之后包含了多个模块路由之后多人开发的时候合并代码可能会造成代码冲突打包也是全部代码一起打包。 微前端解决了这个问题由一个主应用程序也就是基座之后连接多个单独的子应用程序每个子应用程序都是单独的你用vue写商品管理他用react写物流管理等都可以不同的模块可以由不同的技术栈写。打包也是单独打包。比较方便。
2.主应用
主应用就是写菜单组件的之后再通过菜单跳转到子应用程序差不多就这样点击物流管理后就跳转到子应用页面了 1.创建个vue2的项目
这个我就不写了网上一抓一大把,贴个项目创建命令
vue create main-app
2.主应用下载qiankun
下最新版即可
npm install qiankun
3.在main-app/src文件夹下创建main-app.js
这个micorApps就是子应用可以配置多个子应用。但是子应用挂载的div是相同的记住这个 container: #test-web, // 子应用挂载的div const microApps [{name: test-web, // 子应用名称entry: http://localhost:7663/, //子应用运行地址activeRule: /test-web,//匹配的路由sanbox: true //解决css冲突},
]const apps microApps.map(item {return {...item,container: #test-web, // 子应用挂载的divprops: {routerBase: item.activeRule // 下发基础路由}}
})export default apps4.在main.js中导入main-app.js
import Vue from vue
import App from ./App.vue
import router from ./router
import store from ./store
Vue.config.productionTip false
import { registerMicroApps, start } from qiankun;
import mainApp from ./main-app
registerMicroApps(mainApp, {beforeLoad: app {console.log(before load app.name, app.name)},beforeMount: [app {console.log([LifeCycle] before mount %c%s, color: green;, app.name)}],afterMount: [app {console.log([LifeCycle] after mount %c%s, color: green;, app.name)}],afterUnmount: [app {console.log([LifeCycle] after unmount %c%s, color: green;, app.name)}]
})
start()
new Vue({router,store,render: h h(App)
}).$mount(#app)5.配置主应用路由
在main-app/src文件夹下添加qiankun文件夹并且添加index.vue文件作为入口文件
注意这里的idtest-web要和 container: #test-web, 名字一致不然报错
templatediv idtest-web/div
/templatescript
export default {mounted() {},
};
/script
style
#test-web {width: 100%;height: 100%;
}
/style在router文件夹下注册qiankun路由
注意这边的路由模式一定要是history模式不然获取不到子应用程序 path: /test-web/*,路由的名字要和上面的 activeRule:名字一致
主要添加代码 import layout from ../views/qiankun/index.vue { path: /test-web/*, meta: test-web, component: layout }, import Vue from vue;
import VueRouter from vue-router;
import HomeView from ../views/HomeView.vue;
import layout from ../views/qiankun/index.vue
Vue.use(VueRouter);const routes [{path: /,name: home,component: HomeView,},{path: /about,name: about,// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () import(/* webpackChunkName: about */ ../views/AboutView.vue),},{path: /test-web/*,meta: test-web,component: layout}
];const router new VueRouter({mode: history,base: process.env.BASE_URL,routes,
});export default router;
到此主应用程序配置完毕
2.子应用
1.同上创建一个vue2的项目
名字叫sub-app
vue create sub-app
2.在main.js文件添加如下代码 可以看到我注释了如下代码并且添加了生命周期 // new Vue({ // router, // store, // render: h h(App) // }).$mount(#app) import Vue from vue
import App from ./App.vue
import router from ./router
import store from ./store
//引入public-path.js
// import ../public-path;Vue.config.productionTip false// new Vue({
// router,
// store,
// render: h h(App)
// }).$mount(#app)// 判断是否在qiankun的运行环境下非qiankun运行环境下单独运行
if (window.__POWERED_BY_QIANKUN__) {// eslint-disable-next-line no-undef__webpack_public_path__ window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}let instance null;
function render(props {}) {const { container } props;console.log(11111111111111, window.__POWERED_BY_QIANKUN__, 字段值)instance new Vue({router,store,render: h h(App),}).$mount(container ? container.querySelector(#app) : #app, true); //开启沙箱
}if (!window.__POWERED_BY_QIANKUN__) {console.log(独立运行)render();
}function storeTest(props) {props.onGlobalStateChange props.onGlobalStateChange((value, prev) console.log([onGlobalStateChange - ${props.name}]:, value, prev),true,);props.setGlobalState props.setGlobalState({ignore: props.name,user: {name: props.name,},});
}// 各个生命周期只会在微应用初始化的时候调用一次下次进入微应用重新进入是会直接调用mount钩子不会再重复调用bootstrap
export async function bootstrap() {console.log(111111111111 [vue] vue app bootstraped);
}
// 应用每次进入都会调用mount方法通常在这里触发应用的渲染方法
export async function mount(props) {console.log(11111111111 [vue] props from main framework, props);storeTest(props);render(props);
}
// 应用每次切除/注销会调用的方法在这里会注销微应用的应用实例
export async function unmount() {instance.$destroy();instance.$el.innerHTML ;instance null;
}3.注册子应用路由和平时写法一样
添加了俩个路由页面 内容随意
templatediv classsub-app我是子应用页面11/div
/templatestyle langscss scoped
.sub-app {cursor: pointer;background-color: aqua;
}
/style在router中注册 这边基本路由地址是判断是否处在qiankun下 const router new VueRouter({ mode: history, base: window.__POWERED_BY_QIANKUN__ ? /test-web/ : /, routes }) import Vue from vue
import VueRouter from vue-router
import HomeView from ../views/HomeView.vueVue.use(VueRouter)const routes [{path: /,name: home,component: HomeView},{path: /about,name: about,// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () import(/* webpackChunkName: about */ ../views/AboutView.vue)},{path: /test,name: test,// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () import(/* webpackChunkName: about */ ../views/subapp/index.vue)},{path: /testtwo,name: testtwo,// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () import(/* webpackChunkName: about */ ../views/subapp/two.vue)},
]const router new VueRouter({mode: history,base: window.__POWERED_BY_QIANKUN__ ? /test-web/ : /,routes
})export default router4.在vue.config.js文件添加内容如果没有这个文件就自己在sub-app下添加一个 这边需要注意webpack版本5.0以下改为jsonpFunction webpackJsonp_${name} webpack5.0以上 chunkLoadingGlobal: webpackJsonp_${name} 运行端口7663要和main.app.js的 entry: http://localhost:7663/, //子应用运行地址一致不然获取不到子应用内容 const { name } require(./package.json)module.exports {publicPath: /, // 打包相对路径devServer: {port: 7663, // 运行端口号headers: {Access-Control-Allow-Origin: * // 防止加载时跨域}},chainWebpack: config config.resolve.symlinks(false),configureWebpack: {output: {library: ${name}-[name],libraryTarget: umd, // 把微应用打包成 umd 库格式// webpack5.0以上版本使用如下字段chunkLoadingGlobal: webpackJsonp_${name}}}
}
3.运行主应用和子应用
主应用的App.vue添加如下代码
templatediv idappdiv idnavrouter-link to/test-web/testsub-vue1/router-link |router-link to/test-web/testtwosub-testtwo/router-link |/divrouter-view //div
/templatestyle langscss
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}#nav {padding: 30px;a {font-weight: bold;color: #2c3e50;.router-link-exact-active {color: #42b983;}}
}
/style4.效果 需要把子应用程序改为vue3vite的可以看我另一篇vue3vitets实现qiankun微前端子应用-CSDN博客
文章到此结束希望对你有所帮助~
