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

Question

这是引入子应用逻辑

import { loadMicroApp, setDefaultMountApp, initGlobalState } from 'qiankun';export const action = initGlobalState({    workbenchName: ''})export let app = nullexport const loadWorkbench = () => {    app && app.unmount()    app = loadMicroApp({        name: 'app1',        entry: '/child/workbench/',        container: '#body',        activeRule: "/app1",        props: action    });    setDefaultMountApp('/app1')    return app}

主应用内执行引入子应用逻辑:

子应用Webpack打包配置

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;    }   }}

首次访问子应用出现：

实际访问路径:

刷新页面后：

实际访问路径：

尝试的方法：
在nginx.conf再加上下面一段，重写URL,加上后刷新的这个问题就不会出现

    location /app1 {        rewrite / /;    }

主应用、子应用都是Vue3技术栈，路由都是使用vue-hash模式

请问我这样是正常的配置吗？那如果链接上有参数之类的，我是不是要在rewrite / /;加各种正则判断?
如果不是这个配置的，那应该如何配置它

Answer 1

问题应该是 try_files 写错了。
一般应该是 try_files $uri $uri/ /index.html

注意最后一个参数/index.html，这里是需要填写URI，而不是文件的绝对路径。

nginx内部在处理这个try_files的时候，会在内部重定向一次，因为这里的路径写错了，它会在重定向的时候又再一次匹配到这个location，再重新执行一次try_files，这就出现循环重定向了，所以报了500。错误日志里面应该会有记录。

---

问题没看全，刚刚才注意到是hash模式。
如果是hash模式，那就可以不用try_files。。。，去掉应该就可以了。

Answer 2

解决了，主页面、子应用都是vue-hash模式，那在引入子应用也应该使用hash

这样就能解决上述的问题