Ant Design Pro学习记录—前后端一体化部署

目录

前言

一、系统配置

二、ant design pro访问路径配置

三、站点访问路径配置

---

---

前言

好长时间没记录了，使用ant design pro有一年了，期间陆续做了好几个项目，从陌生到熟练，还有好多钻研成果没记录，后续有时间陆续补上。

之前几个项目一直是前后端分开部署的，需要配置两个站点域名访问，还要解决跨域session问题，这次把一体化部署记录一下。

---

一、系统配置

服务端用的LNMP，使用tp6框架，使用宝塔面板管理。

tp站点先正常部署，步骤省略，见下图：

配置网站目录和运行目录： 

配置伪静态：

  已上常规部署，不做任何修改，默认文档后续调整，先保证站点可以正常访问。

二、ant design pro访问路径配置

ant design pro 打包后，需要放在tp站点public文件夹，所以访问路径需要修改。

这里在tp站点public目录新建空文件夹s，将打包后的文件放进去。

参考umi官网：部署

打包前修改配置，找到/config/config.ts文件，修改history、publicPath、basePath三个值就可以，其中history和publicPath默认是没有显示的，需要自己加上，publicPath和basePath就配置成自己需要部署的子文件夹。

三、站点访问路径配置

打包放到对应目录后，在域名后加上子文件夹路径可以正常访问，但不是很方便，想要直接访问域名就进入该目录，需要对站点做如下修改。

这里我在tp站点public文件夹新建了一个index.html，在里面处理访问链接，然后需要把站点部署默认文档从index.php修改为index.html，就可以了，index.html内容如下：

<script>
    let domain = window.location.host;
    let url = window.location.href;
    if (url.search(domain+'/m') != -1) {window.location.href = "./index.php/api";}
    else {window.location.href = "./s/"}
</script>

简单说就是获取到当前访问链接，并进行校验，之后重定向到自己需要的路径(里面的/m是我的另一个访问路径)，还有很多其他的写法，大家可以自己来。

这样就可以通过域名直接访问站点，访问tp文件，还可以通过/index.php进行访问，ant design pro中定义接口访问路径都通过/index.php/访问就可以。

我自己定义了个文件，里面配置访问链接，并且判断了dev模式和正式模式，在接口处引入文件使用，这样就不用来回切换修改连接了，

然后将站点的默认文档修改成index.html

如果想要更保险一些，甚至可以把伪静态里面的index.php指向index.html。

已上所有配置全部完成，第一次做一体化部署，大家有其他想法可以留言讨论。