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个评论
全部评论
点击登录,快来和大家讨论吧~
表情
图片
暂无评论
作者分享
ARTS 0913: 双栈互补实现队列、CIDR 聚合化解路由膨胀与 AI 作弊串通绝非偶然 Bug
4
微信爆出 P0 级漏洞😱,接到来电就中招,碰都不用碰手机。
怎么中招的? 黑客只需要是你的微信好友,然后给你打一个语音或视频通话,好了已经搞定了,你已经被黑了。
有多离谱? 完全不需要接这个电话。手机锁着屏扔在桌上,你看都没看一眼,只要响了几秒钟,恶意代码就已经在后台跑起来了。
黑客瞬间拿下你整个微信:翻你聊天记录、看你隐私、用你的身份给别人发消息。
更恐怖的是,你的微信紧接着会变成"丧尸",黑客可以自动给通讯录里所有好友挨个打电话,把他们也感染一遍。每个受害者又立刻变成新的传播者,像病毒一样指数级扩散...,不敢想象如果被利用了,理想情况下那需要多久就能扩散到全国的用户呢?30 分钟左右
好消息是这个 bug 微信团队已经知道了这个 bug ,坏消息这个 bug 好像不是微信团队发现的
文章来源:https://calif.io/research/weworm
7
ARTS 0906: 辅助栈记录每层最小值、OSI 模型从未真正落地
6
Git 修改历史 Commit
5
Rails 之父 DHH:我三个月没手写过一行新代码
5

