前端微服务MicroApp应用

最新推荐文章于 2024-06-10 18:30:10 发布
最新推荐文章于 2024-06-10 18:30:10 发布
阅读量3.2k 收藏 6
点赞数 1
文章标签： 前端 微服务 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47452289/article/details/122429321
版权

前端微服务MicroApp应用及nginx部署

首先放一波官网 https://cangdu.org/micro-app/

1、创建一个文件夹，包含基座项目及子项目

文件目录大概为

micro-demo

​ — mic-main (vue2为基础的基座)

​ — mic-vue2 (vue2的子项目）

​ — mic-vue3 (vue3的子项目）

这三个项目都是hash路由模式

2、配置基座

进入 mic-main 项目

  1. 安装依赖

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

  2. 在main.js引入依赖

    import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import microApp from '@micro-zoe/micro-app'  // 引入依赖

microApp.start()  // 调用microApp主函数，开启微服务

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

  3. 在components文件下创建两个vue组件，分别叫vue2Page.vue和vue3Page.vue，配置子项目的路径

    // vue2Page.vue配置
<template>
    <div>
      <h2>这是子应用vue2的页面</h2>
      <micro-app 
				 name='vue2Page'    // 子项目名称，必须全局唯一
                 :url='url'         // 子项目的访问地址
                 baseroute='/vue2'  // 基座应用分配给子应用的路由前缀
      ></micro-app>
    </div>
</template>

<script>
export default {
  name: 'vue2Page',
  data () {
    return {
      url:'//localhost:3000/vue2/'
    }
  }
}
</script>

    // vue3Page.vue配置
<template>
    <div>
      <h2>这是子应用vue3的页面</h2>
      <micro-app 
				 name='vue3Page'    // 子项目名称，必须全局唯一
                 :url='url'         // 子项目的访问地址
                 baseroute='/vue3'  // 基座应用分配给子应用的路由前缀
      ></micro-app>
    </div>
</template>

<script>
export default {
  name: 'vue3Page',
  data () {
    return {
      url:'//localhost:4000/vue3/'
    }
  }
}
</script>

  4. 在router配置这两个组件的路由

    import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/vue2/*',
    name: 'vue2',
    component: () => import('../components/vue2Page')
  },
  {
    path: '/vue3/*',
    name: 'vue3',
    component: () => import('../components/vue3Page')
  },
]

const router = new VueRouter({
  mode: 'hash',
  routes
})

export default router

3、配置vue2子项目

进入 mic-vue2 项目

  1. 在src下创建一个public-path.js文件，解决打包时候静态资源无法加载问题

    if (window.__MICRO_APP_ENVIRONMENT__) {
  // eslint-disable-next-line
  __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__
}

  2. 修改public目录下的index.html，修改最下面的div的id为app1，防止子项目根页面id和基座根页面id重复

    <!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
      .......
    <div id="app1"></div> // 修改id
  </body>
</html>

  3. 修改main.js，让子项目可以单独运行，也可以配置函数mount和unmount进行数据操作

    import './public-path'  // 引入第1步配置的文件，必须在首行引入
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

let app

// 应用每次渲染时都会执行 mount 方法，在此处可以执行初始化相关操作（必传)
export async function mount (props) {
  console.log('微应用vue2渲染了')
  app = new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount(props?.container?.querySelector('#app1') || '#app1')
}

// 卸载应用
export async function unmount () {
  console.log('微应用vue2卸载了')
  app.$destroy()
  app.$el.innerHTML = ''
  app = null
}


// 微前端环境下，注册mount和unmount方法
if (window.__MICRO_APP_ENVIRONMENT__) {
  window[`micro-app-${window.__MICRO_APP_NAME__}`] = { mount, unmount }
} else {
  // 非微前端环境直接渲染
  mount()
}

  4. 修改vue.config.js，主要配置项为devServer，port必须和基座中配置的子项目访问地址一致，再开启跨域

    const { name } = require('../package.json')
module.exports = {
  transpileDependencies: ['common'],
  lintOnSave: false,
  chainWebpack: config => config.resolve.symlinks(false),
  configureWebpack: {
    output: {
      // 把子应用打包成 umd 库格式
      library: 'mic-vue2',
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_${name}`
    }
  },
  publicPath: '/vue2',  // 配置子路径地址
  devServer: {
    port: 3000,  // 此端口号必须和基座中的micro-app中配置的url地址一致
    headers: {
      'Access-Control-Allow-Origin': '*' // 开启跨域
    }
  }
}

4、配置vue3子项目

方法同上，主要是mian.ts配置稍微修改

import './public-path'
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import routes from './router'
import App from './App.vue'

let app = null
let router = null
let history = null

// 将渲染操作放入 mount 函数
function mount () {
  history = createWebHashHistory(window.__MICRO_APP_BASE_ROUTE__ || '/vue3/')
  router = createRouter({
    history,
    routes,
  })

  app = createApp(App)
  app.use(router)
  app.mount('#app2')

  console.log('微应用vue3渲染了')
}

// 将卸载操作放入 unmount 函数
function unmount () {
  app?.unmount()
  history?.destroy()
  app = null
  router = null
  history = null
  console.log('微应用vue3卸载了')
}

// 微前端环境下，注册mount和unmount方法
if (window.__MICRO_APP_ENVIRONMENT__) {
  window[`micro-app-${window.__MICRO_APP_NAME__}`] = { mount, unmount }
} else {
  // 非微前端环境直接渲染
  mount()
}

5、打包配置

由于打包上线后，子项目的地址为线上的地址，所以micro-app的url匹配不上，无法加载子项目，需要环境变量配置url

  1. 进入基座项目mic-main，在根目录下添加两个环境文件.env.development和.env.production

  2. // 开发环境 .env.development 配置
VUE_APP_SUB_VUE2=//localhost:3000/vue2/
VUE_APP_SUB_VUE3=//localhost:4000/vue3/

  3. // 生产环境 .env.production 配置
VUE_APP_SUB_VUE2=//192.168.12.135:20071/vue2/
VUE_APP_SUB_VUE3=//192.168.12.135:20071/vue3/

  4. 修改vue2Page.vue和vue3Page.vue中的micro-app的url配置

    // vue2Page.vue配置
<template>
    <div>
      <h2>这是子应用vue2的页面</h2>
      <micro-app 
				 name='vue2Page'    
                 :url='url'         
                 baseroute='/vue2' 
      ></micro-app>
    </div>
</template>

<script>
export default {
  name: 'vue2Page',
  data () {
    return {
       url:process.env.VUE_APP_SUB_VUE2,  // 修改为环境地址
    }
  }
}
</script>

6、nginx配置

打完包的文件目录为

dist

​ — main (基座的打包文件)

​ — subapp

​ —— sub-vue2 (vue2项目的打包文件)

​ —— sub-vue3 (vue3项目的打包文件)

nginx.conf配置端口如下

 server {
        listen       20071;
        server_name  localhost;

        location / {
        root   html/dist/main;
        index index.html;
        try_files $uri $uri/ /index.html;
        }

        location /vue2 {
        alias   html/dist/subapp/sub-vue2;
        index index.html;
        try_files $uri $uri/ /index.html;
        }

        location /vue3 {
        alias   html/dist/subapp/sub-vue3;
        index index.html;
        try_files $uri $uri/ /index.html;
        }
       
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
qq_47452289
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
使用 Micro-App 构建微前端
吾生有涯0的博客
04-19 392
可以将生成的 JS 和 CSS 文件上传至 CDN 或 Web 服务器，然后在主应用程序中使用 script 标签或 import() 动态加载子应用程序。在上面的代码中，我们使用了 Micro-App 的 Vue 组件调用方式。具体而言，我们是通过在 div 容器中使用 micro-app 标签来渲染子应用程序。以上便是使用 Micro-App 构建微前端的基本步骤，当然在实际项目中还需要根据业务需求进行更加深入的开发和调整。使用 Micro-App CLI 可以快速地创建微前端应用。
Micro App框架Demo
04-03
Micro App框架Demo 详细标注了需要注意的地方
手写微前端microApp-数据通信
最新发布
瓜皮伦的博客
06-10 509
自定义元素无法支持对象类型的属性，只能传递字符串，例如会转换为，想要以组件化形式进行数据通信必须让元素支持对象类型属性，为此需要重写micro-app原型链上setAttribute方法处理对象类型属性。// 记录原生方法// 重写setAttribute// 目标为micro-app标签且属性名称为data时进行处理//Object.getOwnPropertyNames 返回对象的全部属性名// 过滤vue框架注入的数据// 因为获取的数据中会有vue框架注入的数据，
microapp-demo.zip
05-14
microapp-demo.zip
micro-app:DemoApp（Mongo，Spring，Angular）
05-19
我在研究AngularJS的过程中写的一个小项目，没有声称正确的体系结构和解决方案的高雅性。
MicroApp搭建样例(一)
Keith_Lee的博客
06-22 759
简单上手MicroApp微服务框架
Micro-app 微前端框架demo介绍
瓜皮伦的博客
01-07 1711
主应用1、创建一个页面，需要加入micro-app自定义元素2、配置路由子应用1、如果在微前端中，加上路由前缀2、设置跨域。
[14章附电子书]从0到1落地微前端架构， MicroApp实战招聘网站
04-22
MicroApp框架是京东出品的一种用于构建微前端架构的开源框架，旨在帮助开发者更好地构建和管理复杂的前端应用程序。 京东MicroApp框架具有以下特点和功能： 轻量级：框架本身体积小，加载速度快，不会给应用程序...
从0到1落地微前端架构， MicroApp实战招聘网站（14章+电子书）
04-22
“微前端架构”就是构建基于微服务的前端应用架构。其思想是将前端应用切分为一系列可以单独部署的松耦合的应用，然后将这些应用组装起来创建单个面向用户的应用程序。 二. 微前端的优势 降低代码耦合 独立开发、...
完结14章从0到1落地微前端架构， MicroApp实战招聘网站
04-23
视频课程下载——【完结14章】从0到1落地微前端架构， MicroApp实战招聘网站（附电子书）
京东开源微前端架构框架
04-13
微前端架构是一种新型的前端架构模式，它的核心思想是将大型的单体应用拆分为多个小型的、独立的子应用，每个子应用都可以单独开发、部署和更新，类似于微服务架构在后端的实践。京东的微应用框架就是这种思想的具体...
qiankun-micro-app:qiankun 微前端应用实践与部署
05-14
qiankun 微前端应用实践与部署 微前端应用分为主应用与子应用，部署方式是分别编译好主应用与子应用，将主应用与子应用部署到 nginx 配置好的目录即可。 代码仓库 分别进入 portal、app1、app2 根目录，执行: 开发模式 # portal yarn yarn start # app1、app2 npm install npm run dev 生产模式 # portal yarn build # app1、app2 npm run build 主应用 主应用 js 文件引入 qiankun 注册子应用，并编写导航页显示跳转逻辑。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>QianKun Example</title> </head> <body> <div cla
Micro_APP商城源码
04-16
百雀羚官方期间店-手机APP商城源码FACEUI前端框架- 研发
微前端解决方案micro-app
qq_18283943的博客
10-27 906
1、京东出品的micro-app (推荐+++) https://cangdu.org/micro-app/docs.html#/ 2、single-spa（推荐++）和qiankun（推荐+） https://www.jianshu.com/p/54904acb5896 主要介绍了single-spa。是在qiankun发展起来的。需要改单页的打包方式。 ———————————————— 版权声明：本文为CSDN博主「一键写代码」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本
微前端 - micro-app
lhz_333的博客
08-15 3174
之前已经实践过阿里微前端框架 qiankun，现在来使用一下京东推出的微前端解决方案 - MicroApp。
micro-app微前端数据通信
wangweiruning的博客
04-26 1320
micro-app微前端数据通信
micro-app使用（基于vue3）
qq_42038997的博客
08-08 1412
使用微前端，需要使用一个项目作为基座，其余的项目为子应用，创建两个新项目为例。
记录两个不同的域名使用同一个微应用遇到的坑（micro-app)
weixin_43169949的博客
06-28 1096
由于公司的项目越来越多，很多的系统，也有很多相似的模块，为了解决重复造轮子，降低开发维护成本，故将这些抽出来单独作为微应用。经过调研，发现某东出品的比较吻合。
micro-app 使用
zm1640111308的博客
06-20 4582
micro-app 使用
微前端microapp配置nginx
05-12
微前端（Micro Frontends）是一种将大型前端应用程序拆分为更小、更简单的部分的架构模式。每个部分都可以独立地开发、测试和部署，然后组合成一个完整的应用程序。 在微前端中，每个部分都需要被打包成一个单独的应用程序，并通过相应的 URL 地址来访问。因此，我们需要一个反向代理服务器来将请求路由到正确的应用程序。 Nginx 是一个流行的反向代理服务器，可以用来配置微前端的部署。下面是一个简单的 Nginx 配置示例： ``` server { listen 80; server_name localhost; location /app1/ { proxy_pass http://localhost:3001/; } location /app2/ { proxy_pass http://localhost:3002/; } location /app3/ { proxy_pass http://localhost:3003/; } } ``` 在这个示例中，我们定义了三个不同的应用程序，每个应用程序都有一个不同的 URL 前缀。当用户访问这些 URL 时，Nginx 将请求转发到相应的端口号。 例如，如果用户访问 http://localhost/app1/，Nginx 将会将请求转发到 http://localhost:3001/，这是应用程序 1 的地址。同样的，如果用户访问 http://localhost/app2/，Nginx 将会将请求转发到 http://localhost:3002/，这是应用程序 2 的地址。 当部署微前端应用程序时，需要根据实际情况修改 Nginx 配置，以确保所有请求被正确地路由到相应的应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值