接入qiankun 微前端并配置nginx后,首次子应用能出现,刷新后出现500页面?-灵析社区

momo

这是引入子应用逻辑 import { loadMicroApp, setDefaultMountApp, initGlobalState } from 'qiankun'; export const action = initGlobalState({ workbenchName: '' }) export let app = null export const loadWorkbench = () => { app && app.unmount() app = loadMicroApp({ name: 'app1', entry: '/child/workbench/', container: '#body', activeRule: "/app1", props: action }); setDefaultMountApp('/app1') return app } 主应用内执行引入子应用逻辑: ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240925/68f0f6934c66511d3bba47719e9377ab.png) 子应用Webpack打包配置 ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240925/192ae5300ad8a7d78bed6487204bfec1.png) nginx配置: user nginx; worker_processes auto; error_log /var/log/nginx/error.log notice; pid /var/run/nginx.pid; events { worker_connections 1024; } http { include /etc/nginx/mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; #tcp_nopush on; keepalive_timeout 65; #gzip on; server { listen 80; server_name localhost; #access_log /var/log/nginx/host.access.log main; location / { alias /Users/dist/; index index.html index.htm; try_files $uri $uri/ /Users/dist/index.html; } location /child/workbench { alias /Users/child/workbench/dist/; index index.html index.htm; try_files $uri $uri/ /Users/child/workbench/dist/index.html; } } } 首次访问子应用出现: ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240925/be4f8ab60328ff7c57f71c14b2934532.png) 实际访问路径: ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240925/d0c12a81673475a11d9147483c5b57f3.png) 刷新页面后: ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240925/895dd9a4fb4d06d2ad8e48cc1febe1a1.png) 实际访问路径: ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240925/375a83573c3a892a82b6b0603a371e36.png) 尝试的方法: 在nginx.conf再加上下面一段,重写URL,加上后刷新的这个问题就不会出现 location /app1 { rewrite / /; } 主应用、子应用都是Vue3技术栈,路由都是使用vue-hash模式 请问我这样是正常的配置吗?那如果链接上有参数之类的,我是不是要在`rewrite / /;`加各种正则判断? 如果不是这个配置的,那应该如何配置它

阅读量:144

点赞量:0

问AI
解决了,主页面、子应用都是vue-hash模式,那在引入子应用也应该使用hash "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240925/2b9139f86f94331758f042313b757efd.png) 这样就能解决上述的问题