程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

vue3.0 创建 乾坤qiankun 微前端

发布于2021-03-07 22:19     阅读(1010)     评论(0)     点赞(13)     收藏(5)


主应用:

main.ts

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. import store from './store'
  5. createApp(App).use(store).use(router).mount('#app')
  6. import { registerMicroApps, start } from 'qiankun';
  7. // 注册子应用
  8. registerMicroApps([
  9. {
  10. name: 'child1',
  11. entry: '//localhost:8081',
  12. container: '#yourContainer',
  13. activeRule: '/child/child1', // 子应用触发规则(路径)
  14. },
  15. ]);
  16. // 开启服务
  17. start()

app.vue

  1. <template>
  2. <div id="nav">
  3. 主应用
  4. <!-- 子应用容器 -->
  5. <div id="yourContainer" style="width: 100%;border: 1px solid #ccc;"></div>
  6. <!-- 路由跳转 -->
  7. <router-link to="/">Home</router-link>
  8. <router-link to="/about">About</router-link>
  9. <!-- 子应用路由跳转 -->
  10. <router-link to="/child/child1">child/child1</router-link>
  11. </div>
  12. <router-view/>
  13. </template>

router index.ts

  1. import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router'
  2. import Home from '../views/Home.vue'
  3. const routes: Array<RouteRecordRaw> = [
  4. {
  5. path: '/',
  6. name: 'Home',
  7. component: Home
  8. },
  9. {
  10. path: '/about',
  11. name: 'About',
  12. // route level code-splitting
  13. // this generates a separate chunk (about.[hash].js) for this route
  14. // which is lazy-loaded when the route is visited.
  15. component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  16. }
  17. ]
  18. console.log(process.env.BASE_URL)
  19. const router = createRouter({
  20. // history: createWebHashHistory(),
  21. history: createWebHistory(process.env.BASE_URL),
  22. routes
  23. })
  24. export default router

 

子应用:

main.ts

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. import store from './store'
  5. const temp: any = window;
  6. const isQiankun = temp.__POWERED_BY_QIANKUN__
  7. export async function bootstrap() {
  8. console.log('react app bootstraped');
  9. }
  10. /**
  11. * 应用每次进入都会调用 mount 方法,通常我们在这里触发应用的渲染方法
  12. */
  13. function render() {
  14. createApp(App).use(store).use(router).mount('#child1')
  15. }
  16. export async function mount(props: any) {
  17. console.log(props)
  18. render()
  19. }
  20. // createApp(App).use(store).use(router).mount('#child1')
  21. /**
  22. * 应用每次 切出/卸载 会调用的方法,通常在这里我们会卸载微应用的应用实例
  23. */
  24. export async function unmount(props: any) {
  25. console.log(props)
  26. }
  27. /**
  28. * 可选生命周期钩子,仅使用 loadMicroApp 方式加载微应用时生效
  29. */
  30. export async function update(props: any) {
  31. console.log('update props', props);
  32. }
  33. isQiankun || render();

router index.ts

  1. import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router'
  2. import Home from '../views/Home.vue'
  3. const routes: Array<RouteRecordRaw> = [
  4. {
  5. path: '/',
  6. name: 'Home',
  7. component: Home
  8. },
  9. {
  10. path: '/about',
  11. name: 'About',
  12. // route level code-splitting
  13. // this generates a separate chunk (about.[hash].js) for this route
  14. // which is lazy-loaded when the route is visited.
  15. component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  16. }
  17. ]
  18. const router = createRouter({
  19. history: createWebHistory('/child/child1'),
  20. // history: createWebHistory(process.env.BASE_URL),
  21. // history: createWebHashHistory(),
  22. routes
  23. })
  24. export default router

vue.config.js

  1. const { name } = require('./package');
  2. const port = 8081; // dev port
  3. const dev = process.env.NODE_ENV === 'development'
  4. module.exports = {
  5. publicPath: dev ? `//localhost:${port}` : '/',
  6. devServer: {
  7. port,
  8. headers: {
  9. 'Access-Control-Allow-Origin': '*',
  10. },
  11. },
  12. // 自定义webpack配置
  13. configureWebpack: {
  14. output: {
  15. // 把子应用打包成 umd 库格式
  16. library: `${name}-[name]`,
  17. libraryTarget: 'umd',
  18. jsonpFunction: `webpackJsonp_${name}`,
  19. },
  20. },
  21. };

index.html

  1. <!DOCTYPE html>
  2. <html lang="">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7. <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  8. <title><%= htmlWebpackPlugin.options.title %></title>
  9. </head>
  10. <body>
  11. <noscript>
  12. <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  13. </noscript>
  14. <!-- id不能与主应用重复 -->
  15. <div id="child1"></div>
  16. <!-- built files will be auto injected -->
  17. </body>
  18. </html>

 

原文链接:https://blog.csdn.net/qq_39785489/article/details/114384999




所属网站分类: 技术文章 > 博客

作者:加油打工人

链接:http://www.qianduanheidong.com/blog/article/33576/7deaffb84ff2e255184a/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

13 0
收藏该文
已收藏

评论内容:(最多支持255个字符)