antDesignPro线上刷新404和liunx部署使⽤mock数据umi-
serve+pm2
问题：
线上部署使⽤mock数据
寻解决⽅法：
因为mock的初衷就是为了针对前端单独开发使⽤的，但是umi官⽅考虑到有需要mock单独启动到服务所以出现了 umi-serve 但是umi-serve的⽂档少的可怜，antDesignPro 官⽹上也不是很详细（吐槽⼀下确实很多东西都不是很详细，但是不排除⾃⼰没看清楚）
官⽅介绍：
所以⼤概有了思路安装umi-serve然后build项⽬直接搞定（我以为这样就可以了），没想到build后umi-s
erve和mock 跟项⽬完全没关系依旧⽆效，但是在本地使⽤ npm run start:no-mock 配合 umi-serve确实可以实现mock数据的使⽤，在多个⾥来回反复横跳，终于在⼀位⼤佬的建议下到了⽅案（由于隐私关系不透露⼤佬是谁）：
1.build打包发布到服务器
2.在服务器安装pm2 + nodejs
3.安装git
4.在liunx中将代码拉下来并使⽤pm2启动umi-serve
虽然经历了⼀些曲折但是还是完美的解决了问题。
下⾯就开始我的踩坑之路：
1.404问题和路由问题
第⼀件事就是先build项⽬发布到服务器，我的⽅案是liunx中安装nginx代理 + docker部署
所以简单配置了nginx和docker中的tomcat就直接部署上去了，然后就踩坑了 刷新页⾯404，我当时很
懵逼啊，进页⾯好好的我就出去再回来就404了，这就让我很难受有四⽅寻最后在官⽅⽂档到了：
不愧是官⽅，早就知道你会出现这个错误提前告诉你解决⽅案 其他⽅案不⽤试了我已经踩过坑了直接⽤这个就好了
然后部署上去就好了，如果你的项⽬是 ${host}/demo 这种的格式的你就会发现哎呀图⽚404了不要怕官⽅⼤⼤早就想好了：
如果404 和 这两个你都⽤ 我建议base:'/admin/'就不要加了 不然会出现这种完美的www.*/admin/#/
admin/user/account 丑到极致
好了等你弄完了就发现图⽚好了 就剩mock接⼝了，
2.安装umi-serve
这个umi-serve真的世间罕有我百度了好久，⾕歌了好久哎就是⽜逼到到的东西只有这些：
不⽤其他的了翻了⼀堆 就是把这段话复制过去了，太坑了
安装很简单 确实 就这个
yarn add umi-serve
或者
npm install umi-serve
端⼝默认8001，然后你可以⽤npm run start:no-mock启动项⽬然后把proxy.ts修改⼀下：
这样你就可以在本地体验mock数据和前端分离了
3.服务器安装git（如果想上传可以跳过但是要看下注意事项）：
安装git我就不⽤交了吧直接安装 然后把代码下在liunx中
注意事项：上传⼀定记得把node_modules删掉不然上传到你下班都上传不完，进去可以install的（我⽤macbook Pro m1没有shell 只能⽤finalShell有好⽤的可以推荐给我哈）
4.安装nodejs 和 pm2
先安装nodejs （这⾥我⼜要吐槽⼀下，⼀百度⼀堆啥去官⽹下载包然后解压再安装不能直接安装吗）安装命令：yum install nodejs （你说这不⾹吗）
ant安装包
然后安装pm2：
安装命令：npm install -g pm2（复制就好了直接⽤，不要问为啥全局安装，防⽌你出现问题）
pm2我之前也没了解过，那位⼤佬⼀说我就明⽩了，可以理解为守护进程后台运⾏的⼯具，简单明了
等你都安装完了，就先把项⽬启动起来玩玩然后你就会发现 umi-serve这个命令怎么启动呢，哎巧了我
前⾯忘写了，你要是边看边操作会想骂我哈哈：
需要在你的项⽬中package.json⾥添加⼀句话：
你看看 这不就完事了吗，多简单 你就只需要改⼀下再上传git再在服务器上pull⼀下 多好哈哈
好了可以步⼊正轨了Nginx配置如下：
我这⾥demo是前端 api是mock ⼀定要记得api把index去掉还有加“/api/” 两个/都别忘因为我少加了⼀个就访问不到了
然后你就体验到我搞了六七个⼩时到成果了，突然有点⼩难受
最后求关注，点赞吧

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。