1. 首页
  2. Python

Vue构建跨平台host切换工具(附工具/源码)

身为IT程序猿,深知在开发过程中,后端、前端、测试、运维同学经常面临联调以及各个环境的测试,这时就需要不断切换host来实现。那么市场上现在有很多的host切换工具,如Gas mask、switch host等,但大多是利用文件覆盖实现,不是很完美。

偶然的机会了解到electron这个框架可以使用JavaScript, HTML 和 CSS 构建跨平台的桌面应用,对于js,前/后端开发同学应该不算陌生,于是萌生了实现一个桌面应用版的hostadmin的想法。逻辑都是相通的,所以业余时间,对hostadmin功能进行重构,其功能大体和原插件一致。

一、 准备开发环境

1. 安装node环境 ;

a. 去node官网(nodejs.org/en/download/)下载 node的安装包;

Vue构建跨平台host切换工具(附工具/源码)

b. 建议选择最稳定版本,可以根据个人电脑操作系统选择对应的版本;

c. 打开cmd,输入 node -v 查看npm的版本,版本号出来了,表示npm安装成功,如下图

Vue构建跨平台host切换工具(附工具/源码)

d. 输入 npm -v 查看npm的版本,版本号出来了,表示npm安装成功,如下图

Vue构建跨平台host切换工具(附工具/源码)

2. 安装cnpm包,

执行npm install时可用cnpm代替,使用国内的镜像,安装其他包快的飞起

npm install -g cnpm --registry=https://registry.npm.taobao.org
Vue构建跨平台host切换工具(附工具/源码)

a. 安装vue-cli 命令:

npm install -g vue-cli

b. # 安装 vue-cli 和 脚手架样板代码

npm install -g vue-cli vue init simulatedgreg/electron-vue my-project

过程中会有各种选项,新手建议不使用 ESLint,另外看不懂选项都选no,另外选择打包工具时electron-builder和electron-packager建议选择前者,packager可以同时打包不同的平台的包,builder仅可打包当前平台的包(本人mac本packager未执行成功,利用windows虚拟机打的exe)

c. 生成后项目后,进入项目文件夹执行npm install安装依赖,再执行npm run dev开发模式启动,这时就可以进入开发了

d. 开发完成后执行npm run build会打包,第一次较慢,会下载一些打包用的依赖包,失败就多执行几次,可以翻墙会快点,生成到项目文件的build路径下,自动生成.exe或.dmg文件,可以在Windows和Mac上安装直接使用,非常方便。

二、 Hostadmin 使用流程

a. Npm build出安装包成功安装后,界面如图:

Vue构建跨平台host切换工具(附工具/源码)

b. 在界面上“提示”,是对配置的一个帮忙。

#==== groupName(组名)  127.0.0.1 www.baidu.com 127.0.0.1 www.sina.com  #====

★:“选中”

✩:“部分选中"

备注:#和groupName之间一定要空格,★和✩是对host group全部选中或部分选中不同的展示)

c. 让我们一起来添加三套不同环境的host配置:

#==== uat 127.0.0.1 www.google.cn 127.0.0.2 uat.google.cn #==== #==== pre #128.0.0.1 www.google.cn #128.0.0.2 uat.google.cn #==== #==== online #129.0.0.1 www.google.cn #129.0.0.2 uat.google.cn #====

d. 点击保存后,配置会更新到window和mac的hosts配置文件中,同时页面如图:

Windows目录:C:WindowsSystem32driversetchosts

Mac和Linux目录:/etc/hosts

Vue构建跨平台host切换工具(附工具/源码)
Vue构建跨平台host切换工具(附工具/源码)

通过host group 来进行组和部分ip切换,在观察hosts配置文件和界面,发现已经变化了。

Vue构建跨平台host切换工具(附工具/源码)
Vue构建跨平台host切换工具(附工具/源码)

github地址:github.com/dockersky/ho,您也可以在微信公众号(AiDevOps)回复“hostadmin”直接获取百度网盘的windows和mac的安装包。


​本文作者拥有10年的互联网开发和运维经验。一直致力于运维工具的开发和运维专家服务的推进,赋能开发,提高效能。广告时间:最后给自己代个盐~~欢迎大家有空时翻下我牌子(知乎号:布道 ),看看“开发运维”专栏的文章,希望多些关注和点赞是给作者最好的鼓励 !

Vue构建跨平台host切换工具(附工具/源码)
Vue构建跨平台host切换工具(附工具/源码)

原文始发于:Vue构建跨平台host切换工具(附工具/源码)

主题测试文章,只做测试使用。发布者:熱鬧獨處,转转请注明出处:http://www.cxybcw.com/11763.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code