Micro-app 微前端框架demo介绍

这篇具有很好参考价值的文章主要介绍了Micro-app 微前端框架demo介绍。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Micro-app 框架

Micro-app 微前端框架demo介绍,前端框架

1、框架安装

npm i @micro-zoe/micro-app --save

2、子应用对应的view页面

<template>
  <div>
    <!-- 
      name(必传):应用名称
      url(必传):应用地址,会被自动补全为http://localhost:3000/index.html
      baseroute(可选):基座应用分配给子应用的基础路由,就是上面的 `/my-page`
     -->
     <micro-app 
      name='app-vue2-demo' 
      url='http://localhost:4001/' 
      baseroute='/app-vue2-demo'
     >
    </micro-app>
  </div>
</template>

3、页面对应的路由

{
      //路由路径最好是非严格匹配
      path: "/app-vue2-demo*",
      name: "Vue2DemoPage",
      component: () => import("@/views/Vue2DemoPage.vue")
}

别忘记,view页面也需要配置

4、子应用的配置

子程序路由需要判断是否加上主程序给予的路由前缀

const router = new VueRouter({
  mode: "history",
  base: window.__MICRO_APP_BASE_ROUTE__ || '/',
  。。。。。
 }

5、子程序需要设置跨域

devServer: {
    port: 4001,
    headers: {
      'Access-Control-Allow-Origin': '*',
    }
}

配置总结

主应用

1、创建一个页面,需要加入micro-app自定义元素

2、配置路由

子应用

1、如果在微前端中,加上路由前缀

2、设置跨域

页面渲染实现原理

其实micro-app原理很简单:WebComponent(Custom Element) + HTMLEntry

其实就是把子应用的资源读取过来,直接在基座程序中运行

与react子应用集成

主应用

1、创建一个页面,需要加入micro-app自定义元素

<micro-app 
      name='app-react-demo' 
      url='http://localhost:4002/' 
      baseroute='/app-react-demo'
>
</micro-app>

2、配置路由

{
      //路由路径最好是非严格匹配
      path: "/app-react-demo*",
      name: "ReactDemoPage",
      component: () => import("@/views/ReactDemoPage.vue")
    }

子应用

1、如果在微前端中,加上路由前缀

<Router basename={window.__MICRO_APP_BASE_ROUTE__ || '/'}>
        <Routes>
          <Route path="/" element={<LayoutMain />} > 
            <Route index element={<Home />} />
            <Route path="about" element={<About />} />
            <Route path="info" element={<Info />} />
          </Route>
        </Routes>
      </Router>

2、设置跨域

headers: {
      'Access-Control-Allow-Origin': '*',
},

3、静态资源的处理

在子应用中的src下创建public-path.js文件

if (window.__MICRO_APP_ENVIRONMENT__) {
  // eslint-disable-next-line
  __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__ //http://localhost:4002  默认/
}

这个文件放入到程序的入口文件index.js中直接执行,建议最好放在第一行

import "./public-path";

与vite项目子应用集成

当子应用是vite应用时需要做特别的适配,适配vite的代价是巨大的,我们必须关闭沙箱功能,因为沙箱在module script下不支持,这导致大部分功能失效,包括:环境变量、样式隔离、元素隔离、资源路径补全、baseroute 等。

在嵌入vite子应用时,micro-app的功能只负责渲染,其它的行为由应用自行决定,这包括如何防止样式、JS变量、元素的冲突。

在module模式下,引入的资源大多为相对地址,兼容主要做的事情就是将地址补全。

vite的module模式是指vite在开发模式下直接使用ES模块来加载代码,而不是像传统的构建工具一样通过打包和压缩,将所有代码打包成一个文件。这种模式让我们开发的时候效率很高,不过却给微前端的集成带来了麻烦

因为我们之前说过micro-app集成的原理,就是把子应用打包好的index.html直接拉过来,然后在基座中运行子应用的代码。vite 这种module模式的话。缺少了这个统一的入口,集成起来就非常的麻烦

1、基座项目中添加页面

views中添加页面ViteDemoPage.vue

<template>
  <div>
    <h2>Main - Vite Vue3 Demo</h2>
    <div>
      <micro-app name='app-vite-demo' url='http://localhost:4003/' baseroute='/app-vite-demo'></micro-app>
    </div>
  </div>
</template>

路由中添加:

{
      path: "/app-vite-demo*",
      name: "AppViteDemo",
      component: () => import("@/views/ViteDemoPage.vue")
 }

app.vue页面别忘记添加路由

2、适配vite项目,子应用修改vite.config.ts文件

无论micro-app框架还是single-spa框架,适配vite项目代价都很大,如果你要集成的项目很多是vite项目,建议直接使用iframe的方式接入,或者使用wujie

这里主要说明两点:

1、path如果报错,需要导入nodejs的TypeScript 的声明文件包 npm i --save-dev @types/node

2、赋值的自定义插件报错,直接any

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';
import { join } from 'path'
import { writeFileSync } from 'fs'

// https://vitejs.dev/config/
export default defineConfig({
  //域名,生成环境是是你具体的域名,开发环境下为空字符串,这里手动加上了微前端的路由前缀
  base: `${process.env.NODE_ENV === 'production' ? 'http://my-site.com' : ''}/app-vite-demo/`,
  plugins: [
    vue(),
    // 自定义插件
    (function () {
      let basePath = ''
      return {
        name: "vite:micro-app",
        apply: 'build',
        configResolved(config) {
          //配置资源文件基础路径
          //${config.base} 项目基础路径,就是上面配置的那些
          //${config.build.assetsDir}资源文件存放的目录名。默认情况下,它是 'assets'
          basePath = `${config.base}${config.build.assetsDir}/`
        },
        writeBundle (options, bundle) {
          //遍历所有的代码块,找到文件名以 '.js' 结尾的代码块
          for (const chunkName in bundle) {
            if (Object.prototype.hasOwnProperty.call(bundle, chunkName)) {
              const chunk = bundle[chunkName]
              if (chunk.fileName && chunk.fileName.endsWith('.js')) {
               //使用正则表达式来查找所有的相对路径,并使用 new URL() 方法将这些路径转换为绝对路径。
                chunk.code = chunk.code.replace(/(from|import\()(\s*['"])(\.\.?\/)/g, (all, $1, $2, $3) => {
                  return all.replace($3, new URL($3, basePath))
                })
       //options.dir Vite 构建过程中的输出目录,默认情况下,options.dir 的值就是 dist
      //options.dir 是 dist,chunk.fileName 是 main.js,那么完整的文件路径就是 dist/main.js
                const fullPath = join(options.dir, chunk.fileName)
                //将修改后的内容,重新写入文件系统
                writeFileSync(fullPath, chunk.code)
              }
            }
          }
        },
      }
    })() as any,
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
    }
  },
  server: {
    port: 4003,
  }
})
3、子项目修改容器id和渲染容器id
<!-- index.html -->
<body>
  <div id="my-vite-app"></div>
</body>
// main.ts
createApp(App).mount('#my-vite-app')
4、修改路由

vite子项目需要修改为hash路由

由于主应用关闭的沙箱功能,所以基座应用的环境变量不能使用了,所以,每次切换路由的时候就会产生问题

由于hash路由,使用的是地址栏的处理

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})
5、静态资源
<template>
  <div>
    <div>
      <a href="https://vitejs.dev" target="_blank">
        <img :src="viteLogo" class="logo" alt="Vite logo" />
      </a>
      <a href="https://vuejs.org/" target="_blank">
        <img :src="vueLogo" class="logo vue" alt="Vue logo" />
      </a>
    </div>
    <HelloWorld msg="子应用 -- Vite+Vue@3.x" />
  </div>
</template>

<script setup lang="ts">
import HelloWorld from '@/components/HelloWorld.vue'
const vueLogo = new URL('@/assets/vue.svg', import.meta.url).href
const viteLogo = new URL('/vite.svg', import.meta.url).href
</script>

如果图片比较多,可以用计算属性稍微封装一下

<template>
  <div>
    <div>
      <a href="https://vitejs.dev" target="_blank">
        <img :src="imgUrl('/vite.svg')" class="logo" alt="Vite logo" />
      </a>
      <a href="https://vuejs.org/" target="_blank">
        <img :src="imgUrl('../assets/vue.svg')" class="logo vue" alt="Vue logo" />
      </a>
    </div>
    <HelloWorld msg="子应用 -- Vite+Vue@3.x" />
  </div>
</template>

<script setup lang="ts">
import {computed} from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'
// const vueLogo = new URL('@/assets/vue.svg', import.meta.url).href
// const viteLogo = new URL('/vite.svg', import.meta.url).href

const imgUrl = computed(() => (url: string) => new URL(url, import.meta.url).href);
</script>
6、基座应用的修改,关闭沙箱功能
<micro-app 
  name='app-vite-demo' 
  url='http://localhost:4003/' 
  baseroute='/app-vite-demo'
  inline 
  disableSandbox
 >
 </micro-app>
7、基座应用处理子应用静态资源
microApp.start({
  plugins: {
    modules: {
      // appName即应用的name值,注意这里的name实际上是页面<micro-app>标签的name值
      'app-vite-demo': [{
        loader(code) {
          if (process.env.NODE_ENV === 'development') {
            // 这里 basename 需要和子应用vite.config.js中base的配置保持一致
            code = code.replace(/(from|import)(\s*['"])(\/app-vite-demo\/)/g, all => {
              return all.replace('/app-vite-demo/', 'http://127.0.0.1:4003/app-vite-demo/')
            })
          }
          return code
        }
      }]
    }
  }
})
8、出现的问题

开发者工具console窗口报错

[vite] failed to connect to websocket (SyntaxError: Failed to construct 'WebSocket': The URL 'ws://:/app-vite-demo/' is invalid.)

这个是由于框架自身问题导致,不影响运行,官方已经在1.0beta版本修复了这个问题

由于沙箱隔离关闭,导致环境变量,css隔离,元素隔离、资源路径补全、baseroute等失效

这个问题只有开发者在开发的时候自行定义好开发规范进行规避
demo集合了vue2、vue3、react项目
预览效果
Micro-app 微前端框架demo介绍,前端框架
Micro-app 微前端框架demo介绍,前端框架文章来源地址https://www.toymoban.com/news/detail-822809.html

到了这里,关于Micro-app 微前端框架demo介绍的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • OpenHarmony开发一个App,安装到BearPi-HM Micro开发板

    建议先阅读我们这篇 OpenHarmony 快速上手 BearPi-HM Micro 一个带显示屏的开发板,这里面详细介绍了 Micro开发板如何进行源码编译烧录 ,以及hap包安装的全过程。 本篇是介绍如何开发一个App,然后安装到 BearPi-HM Micro 开发板上。 有同学会问,这不是有手就行了吗? 不完全是,比

    2024年02月13日
    浏览(31)
  • 什么是Vue的前端微服务架构(Micro Frontends)?

    前端微服务架构(Micro Frontends)是一种新型的前端架构风格,它借鉴了后端微服务架构的思想,将前端应用程序拆分为多个小型、独立的部分,每个部分都可以独立部署、独立开发和独立运行。这种架构风格可以帮助前端开发人员更好地管理复杂的前端应用程序,提高开发效

    2024年02月15日
    浏览(32)
  • 比较几种热门Hybrid App前端框架

    作为一种既能够在原生应用程序环境中运行,也能够在 Web 浏览器中运行的应用程序,Hybrid App 主要使用 Web 技术进行开发,如 HTML、CSS 和JavaScript,并使用一个中间层将其封装在原生应用程序中。 随着技术的持续推进,Hybrid App 相关的前端框架也应运而生。今天就来比较几种

    2023年04月18日
    浏览(45)
  • Uni-App开发框架介绍

    Uni-App是一家公司(DCloud)产品,公司承诺将一直开源且免费。 公司旗下有4个产品: HBuilder X:开发工具 uni-app:跨平台统一框架 uniCloud:云服务提供商 uniMPsdk:Mobile端sdk,用于接入uni-app开发的模块 主要盈利方式是uni-ad(广告业务)和unicloud(云服务商) 一次编写,多端运行 小程

    2024年02月12日
    浏览(54)
  • 【BeeWare 框架】Python 安卓开发:BeeWare 框架介绍 | 环境搭建 | 安装 BeeWare | Briecase 公文包 | 分析框架默认生成的 app.py

      ​​​​​​   一起玩蛇啊  👉 《一起玩蛇》🐍 💭 写在前面: 我们假定读者已经安装好了 3.8 版本后的 Python,并且安装好了依赖项,在 Windows 上构建 BeeWare 应用程序需要 Git,你可以可以从 git-scm.org 网站下载。安装完毕后重新启动 cmd,然后就可以准备建立虚拟环境了

    2024年02月03日
    浏览(47)
  • 【Python】实现简易安卓开发:BeeWare 框架介绍 | 环境搭建 | 安装 BeeWare | Briecase 公文包 | 分析框架默认生成的 app.py

      ​​​​​​   一起玩蛇啊  👉 《一起玩蛇》🐍 💭 写在前面: 我们假定读者已经安装好了 3.8 版本后的 Python,并且安装好了依赖项,在 Windows 上构建 BeeWare 应用程序需要 Git,你可以可以从 git-scm.org 网站下载。安装完毕后重新启动 cmd,然后就可以准备建立虚拟环境了

    2024年02月02日
    浏览(100)
  • 从零开始的Django框架入门到实战教程(内含实战实例) - 01 创建项目与app、加入静态文件、模板语法介绍(学习笔记)

      Django是目前比较火爆的框架,之前有在知乎刷到,很多毕业生进入大厂实习后因为不会git和Django框架3天就被踢掉了,因为他们很难把自己的工作融入到整个组的工作中。因此,我尝试自学Django并整理出如下笔记。   在这部分,我将从Django的安装讲起,从创建项目到制

    2024年02月09日
    浏览(72)
  • 最热门的用于后台管理类产品开发的开源前端框架vue-element-admin-4.4.0的介绍和使用

      目录 简介 功能 1、环境准备 2、克隆(下载)vue-element-admin项目 3、处理tui-editor依赖报错 4、安装其它依赖包 5、替换使用tui-editor的内容 6、启动项目 7、运行效果 配置路由代码 布局组件代码 创建页面组件代码 配置主文件 哈哈,本篇文章的标题有点长。在公众号 CTO Plus 前

    2024年02月04日
    浏览(52)
  • 【前端demo】背景渐变动画

    其他demo 效果预览:https://codepen.io/karshey/pen/OJrXZwQ 注意,直接在body上加 height:100% 可能也会出现height为0的情况,这是需要令html的 height:100% html css

    2024年02月10日
    浏览(53)
  • Iris微服务框架_golang web框架_完整示例Demo

    Iris简介 Iris是一款Go语言中用来开发web应用的框架,该框架支持编写一次并在任何地方以最小的机器功率运行,如Android、ios、Linux和Windows等。该框架只需要一个可执行的服务就可以在平台上运行了。 Iris框架以简单而强大的api而被开发者所熟悉。iris除了为开发者提供非常简单

    2024年01月19日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包