最近搜索
暂无搜索记录
热搜
JAVA
大数据
分布式
Python
人工智能
爬虫
WEB
JavaScript
认证
1.问题遇到的现象和发生背景
我在将ruoyi的前端将其作为注册为qiankun的主应用,一个开源的react应用注册为一个qiankun的子应用时出现如下报错:
图中,我已经成功将子应用嵌入到主应用中,但是他还是说我没有暴露生命钩子。
vue应用主体开源项目地址:https://gitee.com/y_project/RuoYi-Cloud/tree/master/ruoyi-ui
react开源项目主体:https://github.com/mckaywrigley/chatbot-ui
这是本人对于前段微应用的研究,并不涉及到商用,非公司内部代码
我在其中加入了调整:
对于vue微应用主体:
在main.js中:
// 加载qiankun插件:
import { registerMicroApps, start } from 'qiankun';
//加入微服务:
// 注册子应用
registerMicroApps([
{
name: 'chat-gpt-ui', // 子应用名称,唯一标识
entry: '//localhost:3001/zh', // 子应用的入口地址
container: '#chat-gpt-ui', // 子应用挂载的容器,即它将被插入的DOM元素选择器
activeRule: '/ai/gpt', // 子应用激活的路由规则,当路由满足此规则时,子应用将被激活
loader: (loading) => {
console.log('Loading', loading);
},
props: {
testProp: 'Test',
},
},
]);
// 启动 qiankun
start({
prefetch: 'all',
sandbox: { experimentalStyleIsolation: true },
});
应用的vue组件:
<template>
<div>
<h1>GPT测试页面</h1>
<!-- 其他代码 -->
<div id="chat-gpt-ui"></div>
</div>
</template>
react子应用调整如下:
在根目录下新建:qiankunLifecycle.js
内容如下:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './pages/_app';
/**
* bootstrap 只会在微应用初始化的时候调用一次,下次微应用重新进入时会直接调用 mount 钩子,不会再重复触发 bootstrap。
* 通常我们可以在这里做一些全局变量的初始化,比如不会在 unmount 阶段被销毁的应用级别的缓存等。
*/
export async function bootstrap() {
console.log('react app bootstraped');
}
/**
* 应用每次进入都会调用 mount 方法,通常我们在这里触发应用的渲染方法
*/
export async function mount(props) {
ReactDOM.render(<App />, props.container ? props.container.querySelector('#chat-gpt-ui') : document.getElementById('chat-gpt-ui'));
}
/**
* 应用每次 切出/卸载 会调用的方法,通常在这里我们会卸载微应用的应用实例
*/
export async function unmount(props) {
ReactDOM.unmountComponentAtNode(
props.container ? props.container.querySelector('#chat-gpt-ui') : document.getElementById('chat-gpt-ui'),
);
}
/**
* 可选生命周期钩子,仅使用 loadMicroApp 方式加载微应用时生效
*/
export async function update(props) {
console.log('update props', props);
}
在生命钩子暴露在app中:_app.tsx
const { i18n } = require('./next-i18next.config');
const packageName = require('./package.json').name;
const webpack = require('webpack');
/** @type {import('next').NextConfig} */
const nextConfig = {
i18n,
reactStrictMode: true,
async headers() {
return [
{
source: '/:path*',
headers: [
{
key: 'Access-Control-Allow-Origin',
value: '*', // 根据需要设置允许的域,'*' 表示允许所有域
},
{
key: 'Access-Control-Allow-Methods',
value: 'GET, POST, PUT, DELETE, OPTIONS',
},
{
key: 'Access-Control-Allow-Headers',
value: 'Content-Type, Authorization, X-Requested-With',
},
],
},
];
},
// 添加这个配置
async rewrites() {
return [
{
source: '/qiankun',
destination: './pages/_app',
},
];
},
webpack(config, { isServer, dev }) {
config.plugins.push(
new webpack.DefinePlugin({
__WEBPACK_OUTPUT_LIBRARY_NAME__: JSON.stringify('chat-gpt-ui'),
__WEBPACK_OUTPUT_LIBRARY_TYPE__: JSON.stringify('umd'),
__WEBPACK_CHUNK_LOADING_GLOBAL__: JSON.stringify(`webpackJsonp_chat-gpt-ui`),
})
);
config.experiments = {
asyncWebAssembly: true,
layers: true,
};
return config;
},
};
module.exports = nextConfig;
2.我的解答思路和尝试过的方法
我怀疑是webpack的问题,我曾经写成为:
config.output = {
…config.output,
publicPath: getPublicPath(),
library: ${packageName}-[name]
,
libraryTarget: ‘umd’,
chunkLoadingGlobal: webpackJsonp_${packageName}
,
};
因为官网说 jsonpFunction
的已经在webpack5.0中摈弃了,但是这样会报错:
ReferenceError: path is not defined
at Object.webpack (D:\Gitee\taichu_ai\taichu-ui-other\chatgpt-ui\next.config.js:66:18)
at Object.getBaseWebpackConfig [as default] (D:\Gitee\taichu_ai\taichu-ui-other\chatgpt-ui\node_modules\next\dist\build\webpack-config.js:1463:32)
at async Promise.all (index 0)
at async Span.traceAsyncFn (D:\Gitee\taichu_ai\taichu-ui-other\chatgpt-ui\node_modules\next\dist\trace\trace.js:79:20)
at async Span.traceAsyncFn (D:\Gitee\taichu_ai\taichu-ui-other\chatgpt-ui\node_modules\next\dist\trace\trace.js:79:20)
at async HotReloader.start (D:\Gitee\taichu_ai\taichu-ui-other\chatgpt-ui\node_modules\next\dist\server\dev\hot-reloader.js:406:30)
at async DevServer.prepare (D:\Gitee\taichu_ai\taichu-ui-other\chatgpt-ui\node_modules\next\dist\server\dev\next-dev-server.js:613:9)
at async D:\Gitee\taichu_ai\taichu-ui-other\chatgpt-ui\node_modules\next\dist\cli\next-dev.js:585:17
D:\Gitee\taichu_ai\taichu-ui-other\chatgpt-ui>npm install @hot-loader/react-dom --save
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: chat-gpt-ui@0.1.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR! react@“18.2.0” from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@“17.0.2” from @hot-loader/react-dom@17.0.2
npm ERR! node_modules/@hot-loader/react-dom
npm ERR! @hot-loader/react-dom@“*” from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\GoLw\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\GoLw\AppData\Local\npm-cache_logs\2023-05-07T10_14_25_372Z-debug-0.log
上述调整是我咨询chatGPT之后做的
3.我想要达到的结果
1,ruoyi存储的认证和cookie能够共用也就是,我希望Chatbot UI能够共享ruoyi的前端认证,我希望他的请求都能交给我的ruoyi后端处理
从抓包结果来看貌似成功了:
只是路径啥要调整一下
2,我希望能够解决这个没有暴露钩子的异常问题
麻烦老师了