vue项目多路由切换;路径智能补全;saasweb生产界面调试本地服务。
前端项目开发是脱离sassweb的,本地开发阶段
这些潜在问题,只能在子应用部署后被发现,费事费力,极其浪费时间!
为了解决上述问题,saasweb-devtool应用而生!它基于qinkun原理和saasweb源代码
能够将本地前端服务,无缝嵌套在任意生产环境的saasweb下,供我们调试使用!
本地服务嵌套在银泰环境下进行调试:
本地服务嵌套在印力测试环境下进行调试:
如图,我们也能发现本地引用部署后,在sassweb的影响下,样式会出现问题。借助这个工具,我们就提前知道了问题所在,提前解决!
首先,浏览器需要安装Tampermonkey浏览器插件
###网后,在谷歌浏览器应用商店可以直接安装此插件。笔者使用的版本是:4.13.6137
然后,进入网页直接安装即可
打开并登录目标saasweb地址
http://taiyun.yintaiblt.com:30000/saasweb/draw/home?pj=059014535DCFA3D41DAA03B7FA6B35C3
xuhaoxing / admin123
运行本地项目
打开saasweb-devtool插件,并刷新页面,等待工具按钮出现
打开设置面板,启用saaweb调试
填入域名,保存配置即可
现在,在生产环境就嵌入你的本地代码了
接下来,就可以尽情调试了!
提示:
本地的代码可以consloe甚至断点,设置完毕后,打开生产地址的控制台,刷新后就可以看到效果!
以下都是可选配置项
1、在qiankun的嵌套模式下,线上环境的本地应用不能支持热更新(iframe可以)
2、在https的页面下,本应用可能会无法使用,暂未解决。
3、对于标准产品较高版本如5.5以上,可能会存在未解决的兼容性问题
如果浏览器出现跨域问题:
打开如下地址:chrome://flags/#block-insecure-private-network-requests
设置规则为 Disabled的即可
如果使用插件后,webpack一直报host的错误问题,开启如下规则即可
// 配置跨域
devServer: {
+ disableHostCheck: true,
proxy: {
// .....
}
},