API 前端本地运行&部署教程
环境准备
本地运行
安装依赖
1、使用 WebStorm 打开(VSCode 也是可以的)
用 WebStorm 打开前端源码
会弹出一个是否相信,选择相信即可
2、找到 Terminal 选项
如果没有看到看这里有没有
还是没有的话找到 Settings -> plugins -> Terminal
3、执行
▼text复制代码npm install --force
最后执行效果:
运行前端
找到根目录下的 pakage.json
启动成功
正常使用需要启动后端,后端的启动可以参考 https://www.codefather.cn/post/1891368782725439489
报错
▼text复制代码error - MFSU dist file: E:\TEMPLATE\API-TEMPT\yuapi-frontend-master\node_modules\.cache\mfsu\mf-va_remoteEntry.js not found error - MFSU latest build error: AssertionError [ERR_ASSERTION]: dependence not found: echarts-for-react
解决:安装 echarts-for-react,安装成功之后重启前端
▼text复制代码npm i echarts-for-react@3.0.2
成功安装结果
pakage.json
▼text复制代码"scripts": { "analyze": "cross-env ANALYZE=1 max build", "build": "max build", "deploy": "npm run build && npm run gh-pages", "dev": "npm run start:dev", "gh-pages": "gh-pages -d dist", "i18n-remove": "pro i18n-remove --locale=zh-CN --write", "postinstall": "max setup", "lint": "npm run lint:js && npm run lint:prettier && npm run tsc", "lint-staged": "lint-staged", "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ", "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src ", "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src", "lint:prettier": "prettier -c --write \"src/**/*\" --end-of-line auto", "openapi": "max openapi", "prepare": "husky install", "prettier": "prettier -c --write \"src/**/*\"", "serve": "umi-serve", "start": "cross-env UMI_ENV=dev max dev", "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev max dev", "start:no-mock": "cross-env MOCK=none UMI_ENV=dev max dev", "start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev max dev", "start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev max dev", "tsc": "tsc --noEmit" },
dev开发化境启动,会热更新(如果有修改会立刻体现)buid构建模式,会生成 dist 文件方便前端部署lint代码检查prettier代码格式化
修改请求路径
修改 baseURL 就是前端请求后端的路径 src/requestConfig.ts
本地就有可以写 localhost 当我们部署到服务器上 baseURL 可以写 192.122.11.11:端口 (自己实际的 IP)或者是自己的域名
- http://localhost:8101
- http://192.122.11.11:8101
- http://leikooo.com:8101 域名相当于平替 IP
- http://leikooo.com 没有端口?别慌
http默认请求80端口只需要在Nginx进行反向代理即可 - https://leikooo.com 和上面的区别?这个是
https安全的连接,默认端口也变成443
打包
build 成功之后,可以在发现 dist 目录

部署
之后可以参考『 前端部署教程(通用) 』
相关专栏
评论
问答助学
相关内容
0个评论
全部评论
点击登录,快来和大家讨论吧~
表情
图片
暂无评论
作者分享
Spring 团队开发者布道师 Josh Long,从 2011 年起每周二坚持写 This Week in Spring https://spring.io/authors/joshlong,大概 15 年半从未间断,到现在大概写了 800 期以上😱
大佬在采访里他说,写博客不是额外负担,而是逼自己整理每周所学的「强制机制」——反正本来就会刷社区动态,写出来既方便自己,也帮到别人。更重要的是 Spring 一直在变:微服务、AI……永远有新东西可聊,停一周就容易掉队。一旦养成习惯,坚持往往比重新开始更容易。
这种级别的大佬都还在用周更逼自己不掉队,我更没理由再拖了。还有之前左耳朵耗子大佬说的 ARTS 打卡,我老实说只撑了两周,真的需要捡起来了,加油✊
10
试了下 Grok CLI:curl -fsSL https://x.ai/cli/install.sh | bash 虽然功能不如 Claude Code 全,但能免费用 Grok 4.5 啊😍。一行 prompt 大概 3 分钟就生成出来了而且没有报错:" Three.js UMD 构建。正在实现完整的太阳系模拟(含自定义轨道控制,兼容本地打)"。
大伙可以访问试试:https://solar-system-seven-mocha.vercel.app/
4
彻底搞懂 Spring AI Tool Calling:从底层协议到源码执行全流程
7
别用 JWT 管理用户会话
9
没想到 Bot 占全球 HTML 流量的 50% 以上了,被这个比例给震惊到了。还有开发者在评论区说自己的网站「每天」访问量 250k 但是 Cloudflare 显示真实的用户只有 150 个😱
数据来源:https://radar.cloudflare.com/traffic#bot-vs-human
5

