微前端wujie的使用与nginx部署整理

效果展示

废话不说直接上代码

官网入口

前提：主项目是vue2 子项目是vite+vue3

一、主项目搭建

1、创建vue2项目 vue create main-vue# vue2 框架
npm i wujie-vue2 -S
# vue3 框架
npm i wujie-vue3 -S2、安装wujie组件 npm i wujie-vue2 -S//vue2路由只能用3.x vue3则是4.x
3、安装路由 yarn add vue-router@3.2.0

二、主项目主要代码

API详解

1）首先设置vue.config跨域

module.exports = {lintOnSave: false,publicPath: process.env.NODE_ENV === "production" ? "/demo-main-vue/" : "/",devServer: {headers: {"Access-Control-Allow-Origin": "*",},open: process.env.NODE_ENV === "development",port: "8100",},transpileDependencies: [ "sockjs-client" ],
};

2）在我们入口文件进行无界组件挂载

import WujieVue from "wujie-vue2";
Vue.use(WujieVue);// 在 xxx-sub 路由下子应用将激活路由同步给主应用，主应用跳转对应路由高亮菜单栏
bus.$on("sub-route-change", (name, path) => {const mainName = `${name}-sub`;const mainPath = `/${name}-sub${path}`;const currentName = router.currentRoute.name;const currentPath = router.currentRoute.path;if (mainName === currentName && mainPath !== currentPath) {console.log(mainPath,'5555555');router.push({ path: mainPath });}
});setupApp({name: "vite",url: hostMap("//localhost:7500/"),attrs,exec: true,props,fetch: credentialsFetch,degrade,...lifecycles,
});

3)、在界面使用wujie 进行子应用加载

<WujieVue :key="update" width="100%" height="100%" name="vite" :url="viteUrl" :props="{ data: dataProps ,method:{propsMethod}}"></WujieVue>computed:{viteUrl(){return hostMap("//localhost:7500/") + `#/${this.$route.params.path}`;}},propsMethod(){alert("触发了主程序的弹窗");}

子应用

1)、main挂载

declare global {interface Window {// 是否存在无界$wujie: any;__POWERED_BY_WUJIE__?: boolean;// 子应用mount函数__WUJIE_MOUNT: () => void;// 子应用unmount函数__WUJIE_UNMOUNT: () => void;// 子应用无界实例__WUJIE: { mount: () => void };}
}if (window.__POWERED_BY_WUJIE__) {let instance: any;window.__WUJIE_MOUNT = () => {const router = createRouter({ history: createWebHistory(basename), routes });instance = createApp(App).use(router);instance.mount("#app");};window.__WUJIE_UNMOUNT = () => {instance.unmount();};// module脚本异步加载，应用主动调用生命周期window.__WUJIE.mount();
} else {createApp(App).use(createRouter({ history: createWebHistory(basename), routes })).mount("#app");
}

2）app.vue

<script setup lang="ts">
import {watch} from "vue";
import { useRouter } from "vue-router";
const $route = useRouter();watch($route.currentRoute,(newVal,oldVal)=>{setTimeout(()=>{console.log(newVal,'vite');},200)if(newVal.fullPath.length > 1){window.$wujie?.bus.$emit("sub-route-change", "vite",newVal.fullPath.length > 1 ? newVal.path : '/');}// console.log($route.path,'routeraaa');// window.$wujie?.bus.$emit("sub-route-change", "vite", $route.path)
},{immediate:true
});</script><template><div id="nav"><router-link to="/home">home</router-link> | <router-link to="/dialog">dialog</router-link></div><router-view />
</template><style scoped>
.logo {height: 6em;padding: 1.5em;will-change: filter;transition: filter 300ms;
}
.logo:hover {filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

nginx部署

#wujie 配置
server {listen 80;server_name www.wujie.com wujie.com;index index.jsp index.html index.htm;root /data/webapps/wujie;#iframe跨域问题 配置#       proxy_set_header Upgrade $http_upgrade;#      proxy_set_header Connection "Upgrade";#     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;#    proxy_set_header X-Real-IP $remote_addr;#  proxy_hide_header X-Frame-Options;#  add_header X-Frame-Options ALLOWALL;# add_header Access-Control-Allow-Origin *; # 必须要有#  add_header Access-Control-Allow-Headers *; # 必须要有#  proxy_cookie_domain remote localhost;  # 重要 对应upstream remote #注意别写错位置了 proxy_cookie_path //;# 主应用基座location / {index index.html index.htm;try_files $uri $uri/ /index.html last;if (!-e $request_filename) {proxy_pass http://192.168.20.32;}}location /demo-main-vue {alias   /data/webapps/wujie/;#       if ($uri ~* "b1000") {#访问/product/b1000，重写为/p/1000#           rewrite ^/(.*)/(.*)$ /p/1000 permanent;#           break;#      }index index.html index.htm;}#微应用基座location /demo-vite {alias /data/webapps/wujie/childer/;index index.html index.htm;#       add_header Access-Control-Allow-Origin *;#       add_header Access-Control-Allow-Methods *;#      add_header Access-Control-Allow-Headers *;try_files $uri $uri/ /index.html last;}access_log  logs/jvm_web/jvm_wujie/access.log  main;error_log   logs/jvm_web/jvm_wujie/error.log  crit;}

注意⚠️：

这个地址一定要与自己服务器匹配这个才是部署的关键

希望能帮到正在遇到部署问题的小伙伴

附:代码demo

微前端wujie的使用与nginx部署整理相关推荐

微前端wujie、qiankun、micro-app、EMP 方案比较
目前较成熟的微前方案有 wujie.qiankun.micro-app.EMP 方案,下面分别分析这几个微前端方案: qiankun 方案 qiankun 方案是基于 single-spa 的微前端方 ...
使用各种姿势舒服的部署微前端项目（上：打包与上传）
微前端作为解决巨石应用模块化和降低技术框架变动风险的神器,我觉得是当下前端发展的一大方向,可以在未来5-10年内保持生命力. 作者从2019年12月第一次使用qiankun框架落地微服务以来已经过去了 ...
nginx配置微前端
前言微前端配置 ]# mkdir -p /data/deploy/openresty/qiankun/conf.d ]# cd /data/deploy/openresty/qiankun ]# ...
2023可能是最全的微前端方案调研
文章目录微前端是什么解决的问题优势分类相关技术 1.iframe 2.Web Components 3.ES Module 技术框架 1.single SPA 2.qiankun 3.EMP ...
【微前端架构】微前端——功能团队中缺失的一块拼图
在任何合法的前端开发团队中,提高可扩展性和敏捷性很少会成为头等大事.在处理大型.复杂的产品时,如何确保快速.频繁地交付同时包含后端和前端的功能?像后端那样将前端单体分解成许多更小的部分似乎是答案.如果 ...
微前端(Micro Frontend ) 落地实施的一些具体例子
前文微前端概述(Micro Frontends) 以及相比单体应用,微前端能带来什么好处简单介绍了微前端的概念,本文来看一个具体的应用例子. 原文地址想象一个网站,客户可以在其中订购外卖食品.从表 ...
爱奇艺号微前端架构实践
前言近来,微前端的概念非常火爆,那么什么是微前端架构?微前端架构是一种架构风格类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应 ...
爱奇艺基于 Vue 的微前端架构实践
点击上方"开发者技术前线",选择"星标" 18:50 在看真爱来自:爱奇艺技术产品团队前言近来,微前端的概念非常火爆,那么什么是微前端架构?微前端架构是 ...
微前端-qiankun-落地指北
微前端框架-乾坤的实际落地使用方式微前端是什么? 一个针对前端大型,超大型项目遇到项目运维,开发瓶颈的解决方案微前端针对谁? 大型或者超大型前端项目怎么理解微前端? 与你当前技术无关,比如:vu ...

微前端wujie的使用与nginx部署整理

微前端wujie的使用与nginx部署整理相关推荐

最新文章

热门文章