零基础前端nodejs+vue开发环境搭建

1、前言

本文适合后端开发零基础入门前端 nodejs+vue2开发环境搭建，调试和测试使用到了Whistle + ZeroOmega组合。

2、零基础配置示例

本节借助豆包完成，适合完全不懂的。

2.1、场景说明

远程开发，本地为Windows11系统，远程为Linux系统，vscode远程连接开发机。nodejs 版本为 v18.20.1，npm 版本为 10.5.0，Vue 版本2.6.14，Vue-Router版本3.5.2。假设远程开发机的 IP 为 192.168.0.110，对应的域名为 test.mooon.com。

2.2、node.js+npm安装与验证

1. 下载 Node.js：访问Node.js 官网，选择「LTS 版本」（如 v18.20.1），Windows 系统直接双击安装（默认勾选「Add to PATH」，无需手动配置环境变量）；
2. 验证安装成功：执行 node -v，输出 v18.20.1 即正常；执行 npm -v，输出 10.5.0 即正常（npm 随 Node.js 自动安装）；
3. npm 镜像配置（解决国内下载依赖慢的问题，后端常遇到网络超时）：

# 配置淘宝镜像（临时生效）
npm config set registry https://registry.npm.taobao.org

# 验证镜像是否生效
npm config get registry

# 永久方案1：配置淘宝镜像（推荐）
npm config set registry https://registry.npm.taobao.org --global

# 永久方案2：使用nrm工具管理镜像（更灵活，可切换官方/淘宝源）
npm install -g nrm # 安装镜像管理工具
nrm use taobao # 切换到淘宝镜像
nrm ls # 查看已配置的镜像源

2.3、Vue项目初始化

1. 全局安装 Vue CLI（Vue2 的项目脚手架）：

npm install -g @vue/cli@4 # Vue2对应CLI4版本，CLI5默认Vue3

1. 创建 Vue 项目（与远程开发机同步操作，用 VS Code 远程连接后执行）：

# 1. 进入开发机的工作目录（如 /home/dev）
cd /home/dev

# 2. 创建项目（项目名自定义，如 test-vue-project）
vue 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.exports = defineConfig({
  transpileDependencies: true,
  publicPath: '/mooon/',
  devServer: {
    port: 80,
    host: '0.0.0.0',
    https: false,
    open: false,
    allowedHosts: 'all',
  }
})

2.4、启动nodejs

1. 在项目根目录（vue.config.js 文件所在目录）下，执行“npm run serve”启动 nodejs；
2. 执行“netstat -lpnt |grep 80”检查 nodejs 是否按预期起来了，注意防火墙需要开放80端口；
3. 本地执行“telnet 192.168.0.110 80”或者“curl http:// 192.168.0.110”，检查本地是否可正常连接远程开发机 192.168.0.110。

2.5、防火墙配置

# 1. CentOS/RHEL系统（使用firewalld）
sudo firewall-cmd --add-port=80/tcp --permanent # 永久开放80端口
sudo firewall-cmd --reload # 重启防火墙生效

# 2. Ubuntu/Debian系统（使用ufw）
sudo ufw allow 80/tcp # 开放80端口
sudo ufw reload # 重启防火墙生效

# 3. 验证端口是否开放（通用）
sudo iptables -L -n | grep 80 # 查看80端口是否在允许列表中

2.6、安装和配置Whistle

2.6.1、安装Whistle

安装 Whistle，登陆官网 https://github.com/avwo/whistle-client/releases，下载 Windows 的安装程序，比如 Whistle-user-installer-v1.5.1-win-x64.exe（MacOS 下载 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

1. 配置HTTPS

按照下图完成配置：

1. 新建规则（Rules）

按下图操作，完成后点击保存（Save），就完成了。在第二张图配置了四条规则（Rules），第一条是核心转发，第二条处理 HTTPS 跳转问题，第三条禁用缓存，均为开发场景必备。

当请求时，可在Whistle的Network看到：

2.6.4、总结Whistle配置

1. 配置规则Rules；
2. 开启根证书rootCA.cer的HTTPS；
3. 安装根证书和信任根证书。

2.7、安装和配置ZeroOmega

2.7.1、安装ZeroOmega

进入Chrome的应用商店，安装ZeroOmega（本文时最新版本为 4.8）：

2.7.2、配置ZeroOmega

第1步新建情景模式，本文的情景模式名称为“Whistle代理”，如下图所示完成配置，完成后需要点击“应用选项”保存配置。这里配置的端口即为Whistle提供服务的端口，如果设置非127.0.0.1的地址，那么代理服务器栏也需保持一致。

不要删除“不代理的地址列表”中的这些地址，否则本地访问 Whistle 管理界面会走代理，导致无法打开。

配置完成后，就可在Chrome启用上图所建的情景模式了，弹出菜单中选择“Whistle”即完成：

2.7.3、总结ZeroOmega配置

1. 新建情景模式；
2. 设置情景模式，代理协议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 停止更新。

1. 管理多个代理服务器配置（如“直连”、“走代理A”、“走代理B”）
2. 根据域名/IP 自动选择代理（通过条件规则或 PAC）
3. 不处理请求内容，仅决定“是否走代理”以及“走哪个代理”
4. 用户界面集成在浏览器地址栏旁

Whistle和ZeroOmega经常配合使用，典型场景：

1. 开发者启动 Whistle（监听 127.0.0.1:8888），配置抓包或 mock 规则；
2. 在浏览器中安装 ZeroOmega，创建一个情景模式（如“Whistle 调试”），设置代理为 127.0.0.1:8888；
3. 当需要调试某个网站时，切换 ZeroOmega 到“Whistle 调试”模式，所有流量经 Whistle 处理；
4. 调试完成后，切换回“直连”或“全局代理”模式。

这种组合相当于：ZeroOmega 决定“流量是否交给 Whistle”，Whistle 决定“如何处理这些流量”。ZeroOmega 和 Whistle 是“上下游”关系，而非竞争或衍生关系。ZeroOmega 是 代理开关和路由器，Whistle 是 代理内容处理器。

两者关系总结如下：

维度	ZeroOmega	Whistle
作用	用于将浏览器请求转发到本地 Whistle 代理	代理服务器
所属层级	浏览器插件层
是否需要安装	浏览器扩展	Node.js 应用（npm install -g whistle）、本地应用
是否修改请求内容	❌ 仅路由	✅ 可深度修改
典型用户	普通用户、FQ用户、开发者	前端/测试/后端开发者
关系	互补工具，可协同工作	互补工具，可被 ZeroOmega 引导流量

5、本文术语

术语	通俗解释
Node.js	让 JavaScript 能在服务器端运行的环境（类似 Java 的 JDK）
npm	Node.js 的包管理工具（类似 Java 的 Maven）
Whistle	本地代理服务器（类似「流量中转站」）
ZeroOmega	浏览器代理开关（类似「流量路由器」）
PAC 模式	即Proxy Auto-Config，「自动代理模式」（只对特定域名走代理，不影响百度、谷歌等外部网站）
HSTS 缓存	即HTTP Strict Transport Security，浏览器强制 HTTPS 的缓存机制（访问过一次 HTTPS 后，后续自动跳 HTTPS）