本地调试方式
根据连接的后端服务类型(本地启动后端服务/线上后端服务),分为三种不同的脚手架调试方式。
- 1、当连接的后端服务为线上服务时,也就是只调试前端函数及前端扩展的时候,使用【方案一】进行调试;
- 2、当连接的后端服务为本地服务时,并且后端服务和前端服务在同一台计算机上时,使用【方案二】进行调试;
- 3、当连接的后端服务为本地服务时,并且后端服务和前端服务不在同一台计算机上时,也就是前端后端是两个人单独开发分离的情况,使用【方案三】进行调试;
方案一
当我们单纯的调试前端扩展函数以及单据扩展时,连接的后端服务是线上服务时,我们可以通过浏览器插件Resource Override把线上的扩展文件,代理到本地代码扩展文件即可,这样线上走的前端扩展脚本就是我们本地脚手架的代码脚本,调试步骤如下:
1、谷歌浏览器安装插件Resource Override
1、下载地址:https://github.com/kylepaulsen/ResourceOverride
2、打开谷歌浏览器的管理扩展插件
3、拖拽下载的Resource Override放到浏览器扩展程序处,并开启
4、安装成功后,在扩展程序处可以看到Resource Override,表示安装成功
2、编译脚手架代码
执行npm run build:extend 命令,编译本地前端代码,生成编译后代码
3、获取线上环境加载前端扩展资源的地址
打开项目单据后,打开浏览器开发者中心,打开loadExtend接口
打开接口,查看Preview/Response,获取JS和CSS加载扩展资源的路径
4、打开Resource Override,转发线上的扩展资源指向线下
打开Resource Override,根据2、3步骤获取的线下资源路径和线上资源路径,通过Resource Override插件进行转发
转发完后,我们打开线上的单据,加载到的前端扩展资源都会被打到线下资源,这样就实现了调试前端本地代码的情况。
- 切记,我们调试完前端代码,记得要关闭Resource Override插件的代码转发,避免影响后续使用。
方案二
当连接的后端服务为本地服务时,并且后端服务和前端服务在同一台计算机上启动时,我们可以通过修改前端脚手架配置文件,启动前端服务后,打开相关项目单据,改变域名指向本地,来进行前后端的联调测试。
1.配置本地域名
#本地hosts文件
#自身电脑IP/域名配置
127.0.0.1 local.yonyoucloud.com
2.前端脚手架配置文件修改
前端配置文件路劲:src\common\config.env.js
需要配置HTTP_SERVICE_BASEURL : 需要连接的后端服务地址 HTTP_MAIN_ORIGIN:主站域名(单据的域名)
3.启动前端服务
本地启动第一种方式:
# 1. 启动默认调试,会开启前后端服务
npm run debug
本地启动第二种方式:
# 1. 单独启动前端工程
npm run debug:extend
# 2. 单独启动后端node.js服务
npm run debug:server
4.启动本地后端服务
5.打开具体单据页面,切换域名指向本地
打开需要调试的单据页面,切换线上域名指向本地域名
- 切记,因为本地调试的时候,指向了本地,所以不需要走统一node转发,所以要把路径中的mdf-node删掉
线上单据域名修改为本地域名地址:http://local.yonyoucloud.com:3003/
修改完域名指向后,打开开发者工具(F12),在Cookie里面配置 yht_access_token
方案三
当连接的后端服务为本地服务时,并且后端服务和前端服务不同的计算机上启动时,我们可以通过修改前端脚手架配置文件,启动前端服务后,打开相关项目单据,改变域名指向本地,来进行前后端的联调测试。
1.配置本地域名
#本地hosts文件
#自身电脑IP/域名配置
127.0.0.1 local.yonyoucloud.com
#后端电脑IP/域名配置
xxx.x.x.x xxx.yonyoucloud.com
这里注意的是因为需要进行前后端分离开发,需要配置后端服务地址的IP,这里要保证.yonyoucloud.com保持一致;
2.前端脚手架配置文件修改
一、连接本地后端服务时:
需要配置HTTP_SERVICE_BASEURL(后端服务地址,此地址就是hosts文件里面配置的后端地址)和HTTP_MAIN_ORIGIN (主站域名)
二、连接线上后端服务时:
3.启动前端服务
本地启动第一种方式:
# 1. 启动默认调试,会开启前后端服务
npm run debug
本地启动第二种方式:
# 1. 单独启动前端工程
npm run debug:extend
# 2. 单独启动后端node.js服务
npm run debug:server
4.访问沙箱节点转本地调试
线上单据域名修改为本地域名地址:http://local.yonyoucloud.com:3003/ 与线上地址的域名后缀保持一致即可
修改完域名指向后,打开开发者工具(F12),在Cookie里面配置 yht_access_token
5.(F12)开发者工具调试
1、打开F12(开发者工具)调试代码,一般非生产环境,为我们放出了yya这个模型,yya代表的是页面的viewModel; 2、当在生产环境下调试时,yya没有了,需要在开发者工具输入cb.debug=true,然后刷新本页面,放开生产调试把柄;