umi4 子目录部署 -缺少相关文档 [Bug]

[hyzx86]

What happens?

"@umijs/max": "^4.0.33"
ant-design-pro : 6.0.0.beta.1 (最新版本默认分支)

在使用子目录的情况下

import { history } from '@umijs/max';

// app.tsx 中用来检查当前页面是否需要登录
  console.log('WITHELIST currentPath: ', location.pathname.toLowerCase());

umi 3 ： history.location.pathname 显示为 "/login"
umi 4 ：history.location.pathname 显示为 "/sea/login"

Mini Showcase Repository(REQUIRED)

Please provide a minimal reproduction then upload to your GitHub. 请提供 最小重现，并上传到你的 GitHub 仓库

ant-design/ant-design-pro#10471

How To Reproduce

Steps to reproduce the behavior: 1. 2.

Expected behavior 1. 2.

Context

我的配置如下
config.local.ts

{
  base: '/sea/',
  outputPath: 'dist/sea',
  publicPath: '/sea/',
  manifest: { basePath: '/sea' },
  define: {
    API_BASE_URL: 'http://localhost:2919/SalesPortal',
    CLIENT_ROOT: 'http://localhost:1688/sea',
    CLIENT_ID: 'sea_client',
    SKIP_LOGIN_PAGE: false,
    LOGIN_PAGE: '/user/login',
    DISABLE_LANGSELECT: true,
    PUBLIC_PATH: '/sea/'
  },
  locale: { default: 'en-US' },
  layout: { title: 'sea (Testing)' },
  headScripts: [ { src: '/sea/scripts/loading.js', async: true } ]
}

且开启 runtimePublicPath:{} 后打不开页面，以上问题在 exportStatic 未开启的情况下测试

• Umi Version:"@umijs/max": "^4.0.33"
• Node Version:
• Platform:

[github-actions]

由于缺乏足够的信息，我们暂时关闭了该 Issue。请修改（不要回复） Issue 提供最小重现以重新开启。谢谢。

[hyzx86]

runtimePublicPath开启后 报错如下：

[hyzx86]

更新配置

 {
  base: '/sea/',
  outputPath: 'dist/sea',
- publicPath: `${currentConfg.publicPathPrefix}/`,
- manifest: {
-     basePath: currentConfg.publicPathPrefix,
- }
  define: {
    API_BASE_URL: 'http://localhost:2919/SalesPortal',
    CLIENT_ROOT: 'http://localhost:1688/sea',
    CLIENT_ID: 'sea_client',
    SKIP_LOGIN_PAGE: false,
    LOGIN_PAGE: '/sea/user/login',
    DISABLE_LANGSELECT: true,
    PUBLIC_PATH: '/sea/'
  },
  locale: { default: 'en-US' },
  layout: { title: 'sea (Testing)' },
  headScripts: [ { src: '/scripts/loading.js', async: true } ],
+  writeToDisk: true,
+ runtimePublicPath: {}
}

变成了

http://localhost:1688/sea/sea/user/login?redirect=/sea/

[hyzx86]

 {
  base: '/sea/',
-  outputPath: 'dist/sea',
- publicPath: `${currentConfg.publicPathPrefix}/`,
- manifest: {
-     basePath: currentConfg.publicPathPrefix,
- }
  define: {
    API_BASE_URL: 'http://localhost:2919/SalesPortal',
    CLIENT_ROOT: 'http://localhost:1688/sea',
    CLIENT_ID: 'sea_client',
    SKIP_LOGIN_PAGE: false,
    LOGIN_PAGE: '/sea/user/login',
    DISABLE_LANGSELECT: true,
    PUBLIC_PATH: '/sea/'
  },
  locale: { default: 'en-US' },
  layout: { title: 'sea (Testing)' },
  headScripts: [ { src: '/scripts/loading.js', async: true } ],
+ reactRouter5Compat: {},
- writeToDisk: true,
+ runtimePublicPath: {}
}

依旧是 http://localhost:1688/sea/sea/

[fz6m]

1. runtimePublicPath 是 qiankun 用的，不了解机制的时候，自己不需要配置。

2. base: '/sea/' 意味着你要在 http://domain.com/sea/* 提供你的内容，这一般在 nginx 中是 location /sea 再做 try_files 。

3. publicPath: '/sea/' 意味着资源会从 http://domain.com/sea/umi.js 这个层级进行加载。

4. outputPath: 'dist/sea' 意味着产物会放到 dist/sea/* 。

根据 2、3、4 的设定，以 dist/* 为基准提供资源，如果是 /sea/* 需要先试探是否有实体资源，若无，再重写到 /sea/index.html 上，请自行检查资源是如何提供的，路由是否正确，是否符合 SPA 规范等。

[hyzx86]

感谢答复：

1. runtimePublicPath 是 qiankun 用的，不了解机制的时候，自己不需要配置。

关于这点确实不清楚，因为文档上没有任何说明，我可以提交PR 完善下文档，但是这个描述怎么样写才更准确？
https://umijs.org/docs/api/config#runtimepublicpath

但是 @umijs/max 与 umi 中导出的

history.location.pathname 不一致的情况算是bug吗？

[hyzx86]

useLocation().pathname 输出 正常
但
history.location.pathname 输出会多一个子目录

比如 在 使用 app.tsx .getInitialState() 或者其它非组件内调用时无法使用 useLocation

[fz6m]

history.location.pathname 和 useLocation 不一样是一些历史问题，目前可以自己把 base 的部分定义成环境变量再自己拼一下或者 trim 下：

// .umirc.ts

export default {
  base: '/some/',
  define: {
      BASE_URL: '/some'
  }
}

  // use
  history.location.pathname.slice(BASE_URL.length)

// typings.d.ts
declare global {
 const BASE_URL: string;
}

文档不用修改，写的没问题，使用 runtimePublicPath 的时候是在 runtime 修改 publicPath ，你这个场景是固定的 publicPath ，所以和这个选项无关。

[hyzx86]

好的，非常感谢，按照你的说明，重新尝试下

[hyzx86]

可以了，

{
  base: '/sea/',
  outputPath: 'dist/sea',
  publicPath: '/sea/',
  manifest: { basePath: '/sea' },
  define: {
    API_BASE_URL: 'http://localhost:2919/SalesPortal',
    CLIENT_ROOT: 'http://localhost:8000/sea',
    CLIENT_ID: 'sea_client',
    SKIP_LOGIN_PAGE: false,
    LOGIN_PAGE: '/user/login',
    DISABLE_LANGSELECT: true,
    PUBLIC_PATH: '/sea/'
  },
  headScripts: [ { src: '/sea/scripts/loading.js', async: true } ],
}

主要是 history.location.pathname 的问题，自己封装了个函数 替换整个项目里面的 pathname 就好了
但有点让人困惑的是 ，这个history 说是改了。。又没完全改
history.push("/aaa/bbb")
实际跳转的是 /sea/aaa/bbb

不过好在是后者，不然还要再处理下 history.push

[hyzx86]

关联 pull
#9529

[buquan]

history.location.pathname 和 useLocation 不一样是一些历史问题，目前可以自己把 base 的部分定义成环境变量再自己拼一下或者 trim 下：

// .umirc.ts

export default {
  base: '/some/',
  define: {
      BASE_URL: '/some'
  }
}

  // use
  history.location.pathname.slice(BASE_URL.length)

// typings.d.ts
declare global {
 const BASE_URL: string;
}

文档不用修改，写的没问题，使用 runtimePublicPath 的时候是在 runtime 修改 publicPath ，你这个场景是固定的 publicPath ，所以和这个选项无关。

请问qiankun-plugin 2+ 给主应用设置base和publicpath导致子应用的bootstrap多了一个/ 这是为啥，
比如 base和publicPath都设置了 /uat/ , 但是子应用的bootstrap的base打印的是/uat//mypath

[fz6m]

旧版本不维护了，如有需求，建议升级 umi4

[hyzx86]

继续请教下。。

Umi4 打包 的antd
有办法支持租户名称的虚拟目录吗？

https://baidu.com/租户1
https://baidu.com/租户2

怎么配置呀？
现在的情况是 下列配置

  base: '/sea/',
  outputPath: 'dist/sea',
  publicPath: '/sea/',
  manifest: { basePath: '/sea' },

反向代理已经做了重写，
但是 一旦 调用 history.push ，它就跑到 打包的路径下了
比如 访问：
http://baidu.com/tenant1
检查到用户未登录
调用 history.push(‘/login’)

浏览器会跳到 ：
http://baidu.com/sea/login

[fz6m]

history.push 是 SPA 内部的路由跳转，没法跳其他的应用，如果跳其他的应用你可以考虑把根域名做成微前端基座，下发或者全局给一个全局的 history ，然后不同子应用用这个全局 history 就可以跳其他应用了。

否则只能设定 location.href 刷新页面跳其他的应用内页面。

[hyzx86]

感谢答复，
但是我注意到插件里面有这么一段代码
这东西能运行时更新吗？

  return { ...h.location, pathname: h.location.pathname.replace(new RegExp(`^${basename}`), '/') };

export function createHistory(opts: any) {
  let h;
  if (opts.type === 'hash') {
    h = createHashHistory();
  } else if (opts.type === 'memory') {
    h = createMemoryHistory(opts);
  } else {
    h = createBrowserHistory();
  }
  if (opts.basename) {
    basename = opts.basename;
  }

  history = {
    ...h,
    push(to, state) {
      h.push(patchTo(to, h), state);
    },
    replace(to, state) {
      h.replace(patchTo(to, h), state);
    },
    get location() {
      //return h.location;
      return { ...h.location, pathname: h.location.pathname.replace(new RegExp(`^${basename}`), '/') };
    },
    get action() {
      return h.action;
    }
  }

  return h;
}

[hyzx86]

缺少 basename 相关文档和 ts声明
自己做了个patch

diff --git a/templates/history.tpl b/templates/history.tpl
index aa291cb17035bbc954f459431bdd9d67790c3eb7..2ea6c1e44fcc55fa770061ce8897ef619b8ca28e 100644
--- a/templates/history.tpl
+++ b/templates/history.tpl
@@ -1,5 +1,6 @@
 import { createHashHistory, createMemoryHistory, createBrowserHistory } from '{{{ historyPath }}}';
 import type { UmiHistory } from './historyIntelli';
+import { isFunction } from 'lodash';
 
 let history: UmiHistory;
 let basename: string = '/';
@@ -12,8 +13,12 @@ export function createHistory(opts: any) {
   } else {
     h = createBrowserHistory();
   }
-  if (opts.basename) {
-    basename = opts.basename;
+  if(opts.basename){
+    if (!isFunction(opts.basename)) {
+      basename = opts.basename;
+    } else {
+      basename = opts.basename()
+    }
   }
 
   history = {
@@ -25,7 +30,8 @@ export function createHistory(opts: any) {
       h.replace(patchTo(to, h), state);
     },
     get location() {
-      return h.location;
+      //return h.location;
+      return { ...h.location, pathname: h.location.pathname.replace(new RegExp(`^${basename}`), '/') };
     },
     get action() {
       return h.action;

[hyzx86]

呃。。。 这个basename 并不是来自于 config.ts 的 history 属性的。。
要去 umi.ts 文件里面改 🤣

[fz6m]

如有新问题，请再开 issue 。