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
作者分享
IP 数据库体积缩小 31%,关键竟然是合并重复子树
2
提到用 Rust 重写项目,很多人的第一反应往往是性能提升。以 Bun 为例,它最初主要采用 Zig 开发,后来在 2026 年发布的 v1.4 版本中将核心代码迁移到了 Rust。用 Rust 重写,性能、安全性往往是大家想要的,但是有没有想过用 Rust 重写还能发现 bug 呢? pgrust 这个项就是,他用 Rust 重新实现 PostgreSQL,保持通信协议和 SQL 方言兼容。为了确认新系统的行为和原版一致,开发者需要对着 PostgreSQL 的实际返回逐个比对。结果查着查着,有些异常不是新代码的锅,PostgreSQL 自己就是这样的。pgrust 开发者 Michael Malis 把其中几个报告给了 PostgreSQL 社区。 大概的问题: 1)SP-GiST 空间索引里有个函数判断点的方位,代码认为上、下、同一水平线三种情况已经穷尽了,末尾放了句「impossible case」兜底。结果在特定浮点边界附近,三种判断同时不成立,程序真走进了这个「不可能」的分支 2)日期格式缓存复用时,一个解析模式的标记没重置,导致同一条 JSONPath 查询在同一个会话里,换个执行顺序结果就不一样。 3)pgcrypto 的 crypt() 在某些输入下截断了多字节字符,返回的文本编码不合法。能存进去,但 pg_dump 导出时就炸了。 一个用 Rust 重写的新项目,测着测着,把运行了几十年的 PostgreSQL 里埋着的东西翻了出来。Rust 重写的价值,不一定只在跑得更快、更安全这一件事上。为了做到真正的兼容,开发者得把前人没怎么碰过的边界全走一遍,这个过程本身就在帮原版排雷。
4
ARTS 1025: 唯一字符与同构字符串、省词可能增加阅读负担与重新估算软件的实现成本
5
🎉 1024 程序员节快乐! 祝编程导航里的每一位程序员:offer 多多,薪资翻倍,面试顺利,早日拿下心仪 offer!💻
17
AST:从 Java 代码理解抽象语法树
5
下载 APP