1、前言本文适合后端开发零基础入门前端 nodejsvue2开发环境搭建调试和测试使用到了Whistle ZeroOmega组合。2、零基础配置示例本节借助豆包完成适合完全不懂的。2.1、场景说明远程开发本地为Windows11系统远程为Linux系统vscode远程连接开发机。nodejs 版本为 v18.20.1npm 版本为 10.5.0Vue 版本2.6.14Vue-Router版本3.5.2。假设远程开发机的 IP 为 192.168.0.110对应的域名为 test.mooon.com。2.2、node.jsnpm安装与验证下载 Node.js访问Node.js 官网选择「LTS 版本」如 v18.20.1Windows 系统直接双击安装默认勾选「Add to PATH」无需手动配置环境变量验证安装成功执行 node -v输出 v18.20.1 即正常执行 npm -v输出 10.5.0 即正常npm 随 Node.js 自动安装npm 镜像配置解决国内下载依赖慢的问题后端常遇到网络超时# 配置淘宝镜像临时生效npmconfigsetregistry https://registry.npm.taobao.org# 验证镜像是否生效npmconfig get registry# 永久方案1配置淘宝镜像推荐npmconfigsetregistry https://registry.npm.taobao.org--global# 永久方案2使用nrm工具管理镜像更灵活可切换官方/淘宝源npminstall-gnrm# 安装镜像管理工具nrm use taobao# 切换到淘宝镜像nrmls# 查看已配置的镜像源2.3、Vue项目初始化全局安装 Vue CLIVue2 的项目脚手架npminstall-gvue/cli4# Vue2对应CLI4版本CLI5默认Vue3创建 Vue 项目与远程开发机同步操作用 VS Code 远程连接后执行# 1. 进入开发机的工作目录如 /home/devcd/home/dev# 2. 创建项目项目名自定义如 test-vue-projectvue create test-vue-project# 3. 选择Vue2模板# 按上下键选择「Default (\[Vue 2\] babel, eslint)」回车确认如需设置不同的端口可在项目根目录创建 vue.config.js 文件Vue2 默认无此文件需手动创建。示例若 CLI4 版本无此方法可直接删除defineConfig包裹改为module.exports { … }const{defineConfig}require(vue/cli-service)module.exportsdefineConfig({transpileDependencies:true,publicPath:/mooon/,devServer:{port:80,host:0.0.0.0,https:false,open:false,allowedHosts:all,}})2.4、启动nodejs在项目根目录vue.config.js 文件所在目录下执行“npm run serve”启动 nodejs执行“netstat -lpnt |grep 80”检查 nodejs 是否按预期起来了注意防火墙需要开放80端口本地执行“telnet 192.168.0.110 80”或者“curl http:// 192.168.0.110”检查本地是否可正常连接远程开发机 192.168.0.110。2.5、防火墙配置# 1. CentOS/RHEL系统使用firewalldsudofirewall-cmd --add-port80/tcp--permanent# 永久开放80端口sudofirewall-cmd--reload# 重启防火墙生效# 2. Ubuntu/Debian系统使用ufwsudoufw allow80/tcp# 开放80端口sudoufw reload# 重启防火墙生效# 3. 验证端口是否开放通用sudoiptables-L-n|grep80# 查看80端口是否在允许列表中2.6、安装和配置Whistle2.6.1、安装Whistle安装 Whistle登陆官网 https://github.com/avwo/whistle-client/releases下载 Windows 的安装程序比如 Whistle-user-installer-v1.5.1-win-x64.exeMacOS 下载 Whistle-v1.5.1-mac-arm64.dmg。安装好后不用再执行“npm install -g whistle”安装。启动 Whistle可看到 v1.5.1的默认端口为8888而不是 8899后面配置需用到这个端口在Chrom浏览器中检查Whistle是否启动好了MacOS看到的有点不同2.6.2、安装证书2.6.2.1、Windows系统点击“Download RootCA”下载根证书双击证书安装选择「当前用户」→ 「将所有证书放入下列存储」→ 浏览→ 选择「受信任的根证书颁发机构」→ 完成。2.6.2.2、MacOS系统下载后双击文件rootCA.cer添加证书按下图进行。窗口顶部会提示「要将证书导入到哪个钥匙串」点击下拉菜单选择 「系统」而非「登录」「系统」钥匙串可让所有用户信任该证书「登录」仅当前用户生效。证书安装完成后还需信任证书2.6.3、配置Whistle配置HTTPS按照下图完成配置新建规则Rules按下图操作完成后点击保存Save就完成了。在第二张图配置了四条规则Rules第一条是核心转发第二条处理 HTTPS 跳转问题第三条禁用缓存均为开发场景必备。当请求时可在Whistle的Network看到2.6.4、总结Whistle配置配置规则Rules开启根证书rootCA.cer的HTTPS安装根证书和信任根证书。2.7、安装和配置ZeroOmega2.7.1、安装ZeroOmega进入Chrome的应用商店安装ZeroOmega本文时最新版本为 4.82.7.2、配置ZeroOmega第1步新建情景模式本文的情景模式名称为“Whistle代理”如下图所示完成配置完成后需要点击“应用选项”保存配置。这里配置的端口即为Whistle提供服务的端口如果设置非127.0.0.1的地址那么代理服务器栏也需保持一致。不要删除“不代理的地址列表”中的这些地址否则本地访问 Whistle 管理界面会走代理导致无法打开。配置完成后就可在Chrome启用上图所建的情景模式了弹出菜单中选择“Whistle”即完成2.7.3、总结ZeroOmega配置新建情景模式设置情景模式代理协议HTTP代理服务器127.0.0.1代理端口8888代理服务器为Whistle如果IP和端口不是127.0.0.1和8888则需保持相同不代理的地址列表保持不变即可默认三行分别为127.0.0.1、[::1]、localhost完成后注意点击“应用选项”才会生效。3、排错流程图4、ZeroOmega和Whistle介绍ZeroOmega 是 Chrome 和 Firefox 浏览器的插件是 Proxy SwitchyOmega 的一个非官方分支fork或衍生版本主要用于绕过某些限制或适配特定环境如中国网络环境但并非原作者维护的官方项目原版 Proxy SwitchyOmega 已于 2019 停止更新。管理多个代理服务器配置如“直连”、“走代理A”、“走代理B”根据域名/IP 自动选择代理通过条件规则或 PAC不处理请求内容仅决定“是否走代理”以及“走哪个代理”用户界面集成在浏览器地址栏旁Whistle和ZeroOmega经常配合使用典型场景开发者启动 Whistle监听 127.0.0.1:8888配置抓包或 mock 规则在浏览器中安装 ZeroOmega创建一个情景模式如“Whistle 调试”设置代理为 127.0.0.1:8888当需要调试某个网站时切换 ZeroOmega 到“Whistle 调试”模式所有流量经 Whistle 处理调试完成后切换回“直连”或“全局代理”模式。这种组合相当于ZeroOmega 决定“流量是否交给 Whistle”Whistle 决定“如何处理这些流量”。ZeroOmega 和 Whistle 是“上下游”关系而非竞争或衍生关系。ZeroOmega 是 代理开关和路由器Whistle 是 代理内容处理器。两者关系总结如下维度ZeroOmegaWhistle作用用于将浏览器请求转发到本地 Whistle 代理代理服务器所属层级浏览器插件层是否需要安装浏览器扩展Node.js 应用npm install -g whistle、本地应用是否修改请求内容❌ 仅路由✅ 可深度修改典型用户普通用户、翻墙用户、开发者前端/测试/后端开发者关系互补工具可协同工作互补工具可被 ZeroOmega 引导流量5、本文术语术语通俗解释Node.js让 JavaScript 能在服务器端运行的环境类似 Java 的 JDKnpmNode.js 的包管理工具类似 Java 的 MavenWhistle本地代理服务器类似「流量中转站」ZeroOmega浏览器代理开关类似「流量路由器」PAC 模式即Proxy Auto-Config「自动代理模式」只对特定域名走代理不影响百度、谷歌等外部网站HSTS 缓存即HTTP Strict Transport Security浏览器强制 HTTPS 的缓存机制访问过一次 HTTPS 后后续自动跳 HTTPS 零基础前端nodejs+vue开发环境搭建
1、前言本文适合后端开发零基础入门前端 nodejsvue2开发环境搭建调试和测试使用到了Whistle ZeroOmega组合。2、零基础配置示例本节借助豆包完成适合完全不懂的。2.1、场景说明远程开发本地为Windows11系统远程为Linux系统vscode远程连接开发机。nodejs 版本为 v18.20.1npm 版本为 10.5.0Vue 版本2.6.14Vue-Router版本3.5.2。假设远程开发机的 IP 为 192.168.0.110对应的域名为 test.mooon.com。2.2、node.jsnpm安装与验证下载 Node.js访问Node.js 官网选择「LTS 版本」如 v18.20.1Windows 系统直接双击安装默认勾选「Add to PATH」无需手动配置环境变量验证安装成功执行 node -v输出 v18.20.1 即正常执行 npm -v输出 10.5.0 即正常npm 随 Node.js 自动安装npm 镜像配置解决国内下载依赖慢的问题后端常遇到网络超时# 配置淘宝镜像临时生效npmconfigsetregistry https://registry.npm.taobao.org# 验证镜像是否生效npmconfig get registry# 永久方案1配置淘宝镜像推荐npmconfigsetregistry https://registry.npm.taobao.org--global# 永久方案2使用nrm工具管理镜像更灵活可切换官方/淘宝源npminstall-gnrm# 安装镜像管理工具nrm use taobao# 切换到淘宝镜像nrmls# 查看已配置的镜像源2.3、Vue项目初始化全局安装 Vue CLIVue2 的项目脚手架npminstall-gvue/cli4# Vue2对应CLI4版本CLI5默认Vue3创建 Vue 项目与远程开发机同步操作用 VS Code 远程连接后执行# 1. 进入开发机的工作目录如 /home/devcd/home/dev# 2. 创建项目项目名自定义如 test-vue-projectvue create test-vue-project# 3. 选择Vue2模板# 按上下键选择「Default (\[Vue 2\] babel, eslint)」回车确认如需设置不同的端口可在项目根目录创建 vue.config.js 文件Vue2 默认无此文件需手动创建。示例若 CLI4 版本无此方法可直接删除defineConfig包裹改为module.exports { … }const{defineConfig}require(vue/cli-service)module.exportsdefineConfig({transpileDependencies:true,publicPath:/mooon/,devServer:{port:80,host:0.0.0.0,https:false,open:false,allowedHosts:all,}})2.4、启动nodejs在项目根目录vue.config.js 文件所在目录下执行“npm run serve”启动 nodejs执行“netstat -lpnt |grep 80”检查 nodejs 是否按预期起来了注意防火墙需要开放80端口本地执行“telnet 192.168.0.110 80”或者“curl http:// 192.168.0.110”检查本地是否可正常连接远程开发机 192.168.0.110。2.5、防火墙配置# 1. CentOS/RHEL系统使用firewalldsudofirewall-cmd --add-port80/tcp--permanent# 永久开放80端口sudofirewall-cmd--reload# 重启防火墙生效# 2. Ubuntu/Debian系统使用ufwsudoufw allow80/tcp# 开放80端口sudoufw reload# 重启防火墙生效# 3. 验证端口是否开放通用sudoiptables-L-n|grep80# 查看80端口是否在允许列表中2.6、安装和配置Whistle2.6.1、安装Whistle安装 Whistle登陆官网 https://github.com/avwo/whistle-client/releases下载 Windows 的安装程序比如 Whistle-user-installer-v1.5.1-win-x64.exeMacOS 下载 Whistle-v1.5.1-mac-arm64.dmg。安装好后不用再执行“npm install -g whistle”安装。启动 Whistle可看到 v1.5.1的默认端口为8888而不是 8899后面配置需用到这个端口在Chrom浏览器中检查Whistle是否启动好了MacOS看到的有点不同2.6.2、安装证书2.6.2.1、Windows系统点击“Download RootCA”下载根证书双击证书安装选择「当前用户」→ 「将所有证书放入下列存储」→ 浏览→ 选择「受信任的根证书颁发机构」→ 完成。2.6.2.2、MacOS系统下载后双击文件rootCA.cer添加证书按下图进行。窗口顶部会提示「要将证书导入到哪个钥匙串」点击下拉菜单选择 「系统」而非「登录」「系统」钥匙串可让所有用户信任该证书「登录」仅当前用户生效。证书安装完成后还需信任证书2.6.3、配置Whistle配置HTTPS按照下图完成配置新建规则Rules按下图操作完成后点击保存Save就完成了。在第二张图配置了四条规则Rules第一条是核心转发第二条处理 HTTPS 跳转问题第三条禁用缓存均为开发场景必备。当请求时可在Whistle的Network看到2.6.4、总结Whistle配置配置规则Rules开启根证书rootCA.cer的HTTPS安装根证书和信任根证书。2.7、安装和配置ZeroOmega2.7.1、安装ZeroOmega进入Chrome的应用商店安装ZeroOmega本文时最新版本为 4.82.7.2、配置ZeroOmega第1步新建情景模式本文的情景模式名称为“Whistle代理”如下图所示完成配置完成后需要点击“应用选项”保存配置。这里配置的端口即为Whistle提供服务的端口如果设置非127.0.0.1的地址那么代理服务器栏也需保持一致。不要删除“不代理的地址列表”中的这些地址否则本地访问 Whistle 管理界面会走代理导致无法打开。配置完成后就可在Chrome启用上图所建的情景模式了弹出菜单中选择“Whistle”即完成2.7.3、总结ZeroOmega配置新建情景模式设置情景模式代理协议HTTP代理服务器127.0.0.1代理端口8888代理服务器为Whistle如果IP和端口不是127.0.0.1和8888则需保持相同不代理的地址列表保持不变即可默认三行分别为127.0.0.1、[::1]、localhost完成后注意点击“应用选项”才会生效。3、排错流程图4、ZeroOmega和Whistle介绍ZeroOmega 是 Chrome 和 Firefox 浏览器的插件是 Proxy SwitchyOmega 的一个非官方分支fork或衍生版本主要用于绕过某些限制或适配特定环境如中国网络环境但并非原作者维护的官方项目原版 Proxy SwitchyOmega 已于 2019 停止更新。管理多个代理服务器配置如“直连”、“走代理A”、“走代理B”根据域名/IP 自动选择代理通过条件规则或 PAC不处理请求内容仅决定“是否走代理”以及“走哪个代理”用户界面集成在浏览器地址栏旁Whistle和ZeroOmega经常配合使用典型场景开发者启动 Whistle监听 127.0.0.1:8888配置抓包或 mock 规则在浏览器中安装 ZeroOmega创建一个情景模式如“Whistle 调试”设置代理为 127.0.0.1:8888当需要调试某个网站时切换 ZeroOmega 到“Whistle 调试”模式所有流量经 Whistle 处理调试完成后切换回“直连”或“全局代理”模式。这种组合相当于ZeroOmega 决定“流量是否交给 Whistle”Whistle 决定“如何处理这些流量”。ZeroOmega 和 Whistle 是“上下游”关系而非竞争或衍生关系。ZeroOmega 是 代理开关和路由器Whistle 是 代理内容处理器。两者关系总结如下维度ZeroOmegaWhistle作用用于将浏览器请求转发到本地 Whistle 代理代理服务器所属层级浏览器插件层是否需要安装浏览器扩展Node.js 应用npm install -g whistle、本地应用是否修改请求内容❌ 仅路由✅ 可深度修改典型用户普通用户、翻墙用户、开发者前端/测试/后端开发者关系互补工具可协同工作互补工具可被 ZeroOmega 引导流量5、本文术语术语通俗解释Node.js让 JavaScript 能在服务器端运行的环境类似 Java 的 JDKnpmNode.js 的包管理工具类似 Java 的 MavenWhistle本地代理服务器类似「流量中转站」ZeroOmega浏览器代理开关类似「流量路由器」PAC 模式即Proxy Auto-Config「自动代理模式」只对特定域名走代理不影响百度、谷歌等外部网站HSTS 缓存即HTTP Strict Transport Security浏览器强制 HTTPS 的缓存机制访问过一次 HTTPS 后后续自动跳 HTTPS