请教子应用为History路由刷新报错的解决方案

[gudaoxuri]

环境描述

示例工程基于 https://github.com/micro-zoe/micro-app-demo 简化成这样 https://github.com/gudaoxuri/tmp_micro_issue .

• 基座应用与子应用都是Vite-vue3工程
• 基座应用与子应用都使用History路由
• 基座应用与子应用独立部署（基座应用3000端口，路径为 /，子应用4007端口，路径为 /child)，实际部署于k8s中
• 基座应用与子应用通过网关统一暴露服务，示例端口 8080，使用Nginx，实际使用的ingress网关

Nginx示例配置如下：

  # 模拟网关
  server {
        listen       8080;
        # 我本机的IP
        server_name  172.30.111.50;
        location / {
            proxy_pass http://127.0.0.1:3000;
        }
        location /child/ {
            proxy_pass http://127.0.0.1:4007/child/;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }
    # 基座应用
    server {
        listen       3000;
        server_name  localhost;
       # 打包后路径
        root         C:\\...\\main_apps\\vite-vue3\\main-vite;
        index index.html;
        try_files $uri $uri/ /index.html;
        
    }
   # 子应用
    server {
        listen       4007;
        server_name  localhost;
       # 打包后路径        
        root         C:\\...\\child_apps\\vite-vue3\\vite;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

测试情况

从基座应用进入子应用正常：

直接输入子应用地址错误：

当子应用为Hash路由时可正常访问。

我想用History路由，基座应用与子应用独立部署且通过网关访问，请问应该如何配置？

[gudaoxuri]

已解决： gudaoxuri/tmp_micro_issue@f26c4c6

整体思路：

• 无论访问的是基座应用还是子应用，浏览器URL必须都要命中基座应用，再由基座应用分发到子应用
• 为了保证基座应用能分发子应用，那么必须要能访问到子应用，故需要将URL地址改写成子应用真实地址
• 因此URL的地址与网关（模拟的Nginx）的地址是不同的

关键处理点：

• 子应用的WebHistory的基础路径是基座应用访问该子应用的路由前缀，如：

基座应用使用app1前缀应该该子应用：
  {
    path: '/app1/:pathMatch(.*)*',
    name: 'vite',
    component: () => import('./views/child.vue'),
  }
https://github.com/gudaoxuri/tmp_micro_issue/blob/f26c4c696a3c6fe4f782837e3c901871f52c81f8/main_apps/vite-vue3/src/router.ts#L11-L13

子应用创建app1的URL前缀：
const router = createRouter({
  history: createWebHistory('/app1'),
    routes
})
https://github.com/gudaoxuri/tmp_micro_issue/blob/f26c4c696a3c6fe4f782837e3c901871f52c81f8/child_apps/vite-vue3/src/router.ts#L17C1-L20C3

• 子应用要能被网关真实访问，所以需要改写地址

Nginx网关的示例配置
    server {
        listen       8080;
        server_name  172.30.111.50;

        location / {
            proxy_pass http://127.0.0.1:3000;
        }

        location ~* ^/child/(.*)$ {
            proxy_pass http://127.0.0.1:4007/$1;
        }
    }

    server {
        listen       3000;
        server_name  localhost;

        root         C:\\...\\main_apps\\vite-vue3\\main-vite;
        index index.html;
        try_files $uri $uri/ /index.html =404;
        
    }

    server {
        listen       4007;
        server_name  localhost;

        root         C:\\...\\child_apps\\vite-vue3\\vite;
        index index.html;
        try_files $uri $uri/ /index.html =404;
    }
可以看到子应用真实的访问前缀是 child ，所以需要有代码将 app1 改成 child，简化代码如下：
const replaceUrl = () => {
  let actualUrl = window.location.href
  actualUrl = actualUrl.replace('/app1', '/child')
  url.value = actualUrl
}
https://github.com/gudaoxuri/tmp_micro_issue/blob/f26c4c696a3c6fe4f782837e3c901871f52c81f8/main_apps/vite-vue3/src/views/child.vue#L6C1-L10C2