用ant design pro开发前端的时候都是在根目录下调试。正式部署的时候，往往需要部署到外网nginx非根目录。但是，根据官网指导的方法部署后，还有一些坑需要自己淌。
先来看官网关于部署到非根目录的说明
部署在非根目录时一种常见的需求，比如部署在 GitHub pages 中。接下来我们假设我们要部署项目到 ${host}/admin 中。首先我们需要在 config/config.ts 中配置 base,base 是 react-router 的前缀。我们需要将 base 配置为 admin, 如果我们还需要将其部署到 /admin 目录中，我们还需要设置 publicPath。设置完之后是这样的：
export default {// ... some configbase: '/admin/',publicPath: '/admin/',
};接下来我们就可以在 ${host}/admin 中访问我们的静态文件了。值得注意的是，在 dev 模式下 url 路径同样也会被修改。
坑一：刷新页面nginx报500
按照官网的方法打包部署后可以正常进入首页。但是，不管访问任何页面，只要用浏览器刷新页面，nginx就会返回500错误。
要解决这个问题，需要修改nginx配置，为非根目录配置一个别名：
location ^~ /admin{# 配置为nginx下实际放置ant design pro打包文件的目录alias html/admin;index index.html; try_files $uri $uri/ /admin/index.html;}坑二：登录跳转报404
解决了刷新的问题，又发现登出再登录时，跳转回原来页面报404，原因是路径里面多了一个admin，比如，跳转路径变成了
http://host:port/admin/admin/dashboard/analysis
要解决这个问题，需要修改src/pages/user/login/model.ts中登录成功后的跳转url逻辑，如果在配置部署到非根目录的情况下，直接用url进行跳转
*login({ payload }, { call, put }) {const response = yield call(fakeAccountLogin, payload);yield put({type: 'changeLoginStatus',payload: response,});// Login successfullyconsole.debug("response", response);if (response.data.status === 'ok') {message.success('登录成功！');const urlParams = new URL(window.location.href);const params = getPageQuery();let { redirect } = params as { redirect: string };if(redirect){const redirectUrlParams = new URL(redirect);// 如果publicPath（非根目录路径）非空，则直接用redirect进行跳转if (isEmptyStr(publicPath) && redirectUrlParams.origin === urlParams.origin) {redirect = redirect.substr(urlParams.origin.length);if (redirect.match(/^\/.*#/)) {redirect = redirect.substr(redirect.indexOf('#') + 1);}} else {window.location.href = redirect;return;}}yield put(routerRedux.replace(redirect || '/'));}
},这样之后，在非根目录配置ant design pro就可以正常使用了。
参考文献：
https://pro.ant.design/docs/deploy-cn