laravel 好用， ant design pro 不仅好用还好看。那么，laravel + ant design pro 做出来的项目也会很好用，很好看。
创建初始化 laravel 项目以及 ant design pro 项目
先创建 laravel 项目
# 创建 最新版本的 laravel 项目，并且指定项目文件名为 lreact.com
composer create-project laravel/laravel=6.* --prefer-dist lreact.com
# 删除原本的 readme
rm -rf README.md
# 使用新的 readme，简洁
echo '### Laravel 6.* initialize' >> Readme.md
# 初始化 git 仓库
git init
git add .
git commit -m 'Laravel 6.* initialize'
再创建 ant design pro 项目
在 `laravel` 的 `resources` 目录下，新建文件夹 `antdesign`
cd resources
mkdir antdesign
npm create umi
# 依次选择 ant design pro -> javascript
# 当前版本 v4
git add .
git commit -m 'ant design pro v4 initialize'
npm install
安装完成后，需要稍微修改，并打包
部署请参考 https://pro.ant.design/docs/deploy-cn
# 修改输出目录(antdesign 目录下)
vim config/config.js
# 添加指定目录 base 以及 publicPath
export default {
base: '/dashboard/',
publicPath: '/dashboard/',
plugins,
hash: false,
# 编译
npm run build
# 将打包好的文件复制到 laravel 的 public 目录
mv dist ../../public/dashboard
# 访问站点
https://www.lrect.com/dashboard
能正常访问，但是授权登录错误。先到这来。
如果你不想每次都移来移去，可以在 config/config.js 里追加配置 outputPath
参考
于是，配置为
export default {
base: '/dashboard/',
publicPath: '/dashboard/',
outputPath: '../../public/dashboard',
plugins,
hash: false,
再打包。文件就会打包到 laravel 项目下的 public 下的 dashboard 目录下。
修改 request
ant design pro 的请求都放在 services 下。在这里你可以定义和修改请求。但，这里的请求用的是 umi-request, 而这里对 umi-request 的引用放在 utils/request.js 中。这里你可以添加 header，加入拦截器等等。请看 umi-request 文档。
https://github.com/umijs/umi-request/blob/master/README_zh-CN.md
这里添加空的拦截器（request，response），还有添加请求前缀。完整的 request.js 如下。后边，会对拦截器进一步完善。
/**
* request 网络请求工具
* 更详细的 api 文档: https://github.com/umijs/umi-request
*/
import { extend } from 'umi-request';
import { notification } from 'antd';
const codeMessage = {
200: '服务器成功返回请求的数据。',
201: '新建或修改数据成功。',
202: '一个请求已经进入后台排队（异步任务）。',
204: '删除数据成功。',
400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
401: '用户没有权限（令牌、用户名、密码错误）。',
403: '用户得到授权，但是访问是被禁止的。',
404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
406: '请求的格式不可得。',
410: '请求的资源被永久删除，且不会再得到的。',
422: '当创建一个对象时，发生一个验证错误。',
500: '服务器发生错误，请检查服务器。',
502: '网关错误。',
503: '服务不可用，服务器暂时过载或维护。',
504: '网关超时。',
};
/**
* 异常处理程序
*/
const errorHandler = error => {
const { response } = error;
if (response && response.status) {
const errorText = codeMessage[response.status] || response.statusText;
const { status, url } = response;
notification.error({
message: `请求错误 ${status}: ${url}`,
description: errorText,
});
} else if (!response) {
notification.error({
description: '您的网络发生异常，无法连接服务器',
message: '网络异常',
});
}
return response;
};
/**
* 配置request请求时的默认参数
*/
const request = extend({
prefix: '/dashboard',
errorHandler,
// 默认错误处理
credentials: 'include', // 默认请求是否带上cookie
});
// request拦截器, 改变url 或 options.
request.interceptors.request.use(async (url, options) => {
const headers = {
'Content-Type': 'application/json',
'Accept': 'application/json'
};
return (
{
url: url,
options: { ...options, headers: headers },
}
);
})
// response拦截器, 处理response
request.interceptors.response.use((response, options) => {
return response;
});
export default request;
到目前为止，输出目录，接口前缀，都是手动写的。分别写在了三个地方。如果想修改，必须得每个地方改一次。如果定义一个常量，直接使用常量不就好了么。下边进行常量定义。不过，定义了常量，那就必须保证你的需求里这三个地方的值是一样的。
定义常量，方便输出以及接口调用
在 config/config.js 中，定义常量 BASE , 设置好值。
const BASE = '/dashboard';
然后在 define 中进行注册该值。只有注册了，其他 js 才能访问的到，并且不需要加 window，请看这里文档。
https://pro.ant.design/docs/environment-variables-cn#%E5%A4%84%E7%90%86%E5%9C%A8-lint-%E4%B8%AD%E7%9A%84%E6%8A%A5%E9%94%99
于是 config/config.js 是这样
const BASE = '/dashboard';
…
export default {
base: BASE,
publicPath: `${BASE}/`,
outputPath: `../../public/${BASE}/`,
plugins,
hash: false,
targets: {
ie: 11,
},
…
utils/request.js 是这样
const request = extend({
prefix: BASE,
errorHandler,
// 默认错误处理
credentials: 'include', // 默认请求是否带上cookie
});
好了，提交 git 暂时先到这一步。
git add .
git commit -m '定义BASE作为项的输出路径和Api前缀'
最后又多一句，还是可以使用 npm start 进行奔跑的。
可参考
https://pro.ant.design/docs/getting-started-cn
https://www.yuque.com/yuxuanbeishui/zog1rm
https://learnku.com/articles/32218
https://umijs.org/zh/config/#uglifyjsoptions
https://www.codercto.com/a/26106.html
