API 前端本地运行&部署教程

环境准备

本地运行

安装依赖

1、使用 WebStorm 打开(VSCode 也是可以的)

用 WebStorm 打开前端源码

image-20250223170905331

会弹出一个是否相信,选择相信即可

image-20250223171001758

2、找到 Terminal 选项


如果没有看到看这里有没有

image-20241114101254432

还是没有的话找到 Settings -> plugins -> Terminal

image-20241114101344618 image-20241114101433358

3、执行

text
复制代码
npm install --force
image-20250223171201584

最后执行效果:

image-20250223172333989

运行前端

找到根目录下的 pakage.json

image-20250223172510968 image-20250223172530825

启动成功

正常使用需要启动后端,后端的启动可以参考 https://www.codefather.cn/post/1891368782725439489

image-20250223174249420 image-20250223175329945

报错

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,安装成功之后重启前端

image-20250223173900574
text
复制代码
npm i echarts-for-react@3.0.2

成功安装结果

image-20250223173929391

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" },
  1. dev 开发化境启动,会热更新(如果有修改会立刻体现)
  2. buid 构建模式,会生成 dist 文件方便前端部署
  3. lint 代码检查
  4. prettier 代码格式化

修改请求路径

修改 baseURL 就是前端请求后端的路径 src/requestConfig.ts

image-20250223172836344

本地就有可以写 localhost 当我们部署到服务器上 baseURL 可以写 192.122.11.11:端口 (自己实际的 IP)或者是自己的域名

打包

image-20250223174627397 image-20250223174710752

build 成功之后,可以在发现 dist 目录

image-20250223174945772

部署

之后可以参考『 前端部署教程(通用) 』

相关专栏

0个评论
点击登录,快来和大家讨论吧~
表情
图片
暂无评论
leikooo
作者分享
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
下载 APP