环境准备

• API 源码
• node >= 18 推荐使用 NVM 安装
• yarn 官方链接 百度网盘 密码：958c
• WebStorm

本地运行

安装依赖

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"
  },

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

部署

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