项目弄好了，就要做发布的准备。主要是部署的非根目录的配置。
这里，配置在根目录下的 admin 目录。
修改 config/config.ts,增加下边的配置：
…
base: '/admin/',
outputPath: '../../public/admin',
publicPath: '/admin/',
manifest: {
basePath: '/admin/',
},
修改 nginx, 增加下边的配置：
location /admin {
index index.html index.htm;
try_files $uri $uri/ /admin/index.html;
}
linux 下使用 ant design pro 安装依赖的时候，会出现 /bin/sh: 1: umi: not found 问题。需要更改编译模式。
cd /bin
ls -lh sh
# 结果 lrwxrwxrwx 1 root root 4 Jan 21 2020 sh -> dash
下边将 dash 改成 bash。
sudo dpkg-reconfigure dash
# 选择 no 保存即可。
# 然后再执行 ls -lh sh 发现结果是
lrwxrwxrwx 1 root root 4 Jul 28 11:09 sh -> bash
好了，就这样了。
还是那句话，喜欢简洁，有强迫症，就是想弄。那么，从路由和注册登录开始。先去掉其他路由，仅仅保存注册登录和welcome。去掉其他页面，从零开始。
编辑 /config/config.ts,修改路由配置如下：
routes: [
{
path: '/user',
layout: false,
routes: [
{
name: 'login',
path: '/user/login',
component: './user/auth',
},
{
name: 'register',
path: '/user/register',
component: './user/auth',
}
],
},
{
path: '/welcome',
name: 'welcome',
icon: 'smile',
component: './Welcome',
},
{
path: '/',
redirect: '/welcome',
},
{
component: './404',
},
],
注册和路由都进同一个 component, 然后根据路由进行不同的渲染。
继续阅读
ant design pro v5 在
/src/components/下暴露一些顶栏以及底栏的功能。可以在这里进行其功能定义。之前就说过，ant design pro 很多地方不完美，需要自己去打造和改变。
作为一个疯狂的极简的完美追求者， 打开 /src/components/RightContent/ 下的 index.tsx,删掉只剩下这么点东东了。
return (
<Space className={className}>
<Avatar />
{REACT_APP_ENV && (
<span>
<Tag color={ENVTagColor[REACT_APP_ENV]}>{REACT_APP_ENV}</Tag>
</span>
)}
</Space>
);
然后就只剩下头像和昵称了。
删掉 /src/components/HeaderSearch 这个目录。如果需要什么，再自己扩展。删掉不需要的引用。
修改 Avatar，暴露出个人中心等 dropMenu。虽然暴露了，可没有对应的路由页面，点击是 404 。如果想关掉，去掉 menu 设置。如果想扩展 dropMenu 的功能，可以在 ./AvatarDropdown 里边修改逻辑。
<Avatar menu={true} />
ant design pro 版本总是更新，总是没稳定下来。前段时间 v5 也出来了，和 v4 差别蛮大的。就样式来说，我更喜欢宽点的侧边栏，更喜欢将侧边栏伸缩按钮放在顶部。更喜欢暴露更多的 layout，去定义自己想要的。喜欢更简洁，更少的展示的元素。不是专业研究前端的，核心东西还是没深入。从零开始创建项目以及变更项目吧。
yarn create umi
# 选择 ant design pro
# 选择 v5
# 等待下载
# 安装依赖包
yarn
# 启动，先看看效果(默认样式太丑陋，兼职无语)
yarn start
# git 操作
git init
git add .
git commit -m 'ant-design-pro-v5-initialize'
到此， ant design pro v5 已经安装完成。但页面太丑陋，和曾经的页面完全不是一个样。页面丑陋是由 div 和 css 决定的。下边修改下配置，使得样式稍微好看一点。
yarn global add serve 后，想使用 serve 启动服务，发现报 serve: command not found 这个错误。怎么解决了。
# 找到 yarn 的 bin 目录
yarn global bin
# 将该目录添加到环境变量中
# 重新打开终端窗口
总之，上边三步走完，serve 就可以了。
很多情况下，我们都想将 react 编译的项目部署到非跟目录。可默认就必须是根目录，怎么实现呢。
找到 package.json 文件，仅仅在package.json 文件中加入一行 "homepage":".", 即可。 如下。
{
…
"private": true,
"homepage":".",
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"axios": "^0.19.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
…
}
网上还有一种方法，将配置文件暴露出来。执行 npm run eject ，然后修改配置。但感觉这方法比较麻烦，也没弄通过。
如果仅仅是想部署到非跟目录，第一种方法最省事了。
https://www.jb51.net/article/158194.htm
https://segmentfault.com/a/1190000018593030
https://blog.csdn.net/zhaolandelong/article/details/78468842
之所以总结是因为最近也是在看css方面，让我迷惑的是有很多文章 关于布局名词都没有听说过，工作中也很少用。但是我们要与时俱进，叫的多了，它就成为正式名词了。比如 '双飞翼 '圣杯’？？并且我还发现我几乎看了好多文章，他们在从大的角度总结时候，几乎很少有相同，分类角度不尽相同。其实这也没关系，本来就没有一个统一标准，但是还是希望有个相对能够理解 概括角度看css布局。
我们从css发展到现在大类可以归纳为以下几种，你了解的实现方法可能就是以下方式中的具体实现：
用 ant design pro, 就逃不开 umi，现在更是到 umi3 了。
Umi 2 发布已经是一年半之前的事了，在这段时间里，我们发现之前的架构正逐渐不能满足业务飞速发展的需要，于是我们重写了一遍 Umi。经过几个月的 “007 ” 研发，Umi 3 在今天正式和大家见面了，并调整 slogan 为“插件化的企业级前端应用框架”。
有些朋友可能还不太了解 Umi。
Umi 是蚂蚁金服的底层前端框架，已直接或间接地服务了 3000+ 应用，包括 java、node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户，同时希望他也能服务好外部用户。
它包含以下特性：
npm install 报错 npm install antd npm ERR! Maximum call stack size exceeded 处理
rm -rf node_modules
npm install
# 再安装自己想要的
npm install xxx