内网穿透方式

本地开发服务器暴露到公网

Ngrok

Ngrok ：最流行的工具之一，一条命令就能生成一个公网 URL，还自带 HTTPS 和流量监控界面。ngrok http 8080 这样就能用。

用法 ：Ngrok 的使用非常简单，可以概括为三步：下载安装 → 配置身份验证令牌 → 一条命令启动隧道。

下载与安装

根据你的操作系统选择对应的方式

方式1

• macOS (推荐使用 Homebrew) ：在终端执行 brew install ngrok。
• Windows ：从官网下载安装包，解压得到 ngrok.exe 文件。
• Linux ：可使用 snap install ngrok 命令，或从官网下载二进制文件。

方式2：跳过 Homebrew，直接安装 ngrok（最快）

如果不想折腾，直接用官方二进制文件：

# 1. 下载 ngrok
curl -O https://bin.equinox.io/c/bNyj1mQVY4c/ngrok-v3-stable-darwin-amd64.zip

# 2. 解压
unzip ngrok-v3-stable-darwin-amd64.zip

# 3. 移动到系统路径
sudo mv ngrok /usr/local/bin/

# 4. 验证安装
ngrok --version

建议的安装流程

# 1. 先尝试更新
brew update

# 2. 如果不行，清理重试
brew cleanup --prune=all && brew update

# 3. 如果还是不行，直接用 curl 下载 ngrok（最省事）
curl -O https://bin.equinox.io/c/bNyj1mQVY4c/ngrok-v3-stable-darwin-arm64.zip
unzip ngrok-v3-stable-darwin-arm64.zip
sudo mv ngrok /usr/local/bin/

注册账号并配置 (仅首次需要)

• 去 ngrok官网 注册一个免费账号
• 登录后，在仪表盘找到你的 Authtoken（身份验证令牌）
• 在终端执行以下命令，让 ngrok 记住你的令牌：

ngrok config add-authtoken <你的Authtoken>

启动隧道，暴露你的本地服务

假设你的 Vite 项目跑在 5173 端口，在终端中执行

ngrok http 5173

看到如下信息就说明成功了

Session Status                online
Forwarding                    https://<随机子域名>.ngrok-free.app -> http://localhost:5173

现在，任何人通过 https://<随机子域名>.ngrok-free.app 这个公网地址，就能访问你本地的项目了。

如：执行ngrok http 5173

注意点

启动本地vite项目报错

报错说明

Vite 默认只允许 localhost 和 127.0.0.1 访问开发服务器。当你通过 Ngrok 域名访问时，Vite 检测到请求的 Host 是 recharger-serve-drippy.ngrok-free.dev，不在白名单内，所以拒绝了请求。

解决方法

方法一：修改 Vite 配置（推荐）

在项目根目录的 vite.config.js 或 vite.config.ts 中，添加 server.allowedHosts 配置：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    allowedHosts: [
      'recharger-serve-drippy.ngrok-free.dev',
      // 或者允许所有 .ngrok-free.dev 域名（更宽松）
      '.ngrok-free.dev',
    ],
  },
})

更宽松的方式（适合频繁换 Ngrok 域名）：

server: {
  allowedHosts: 'all', // 允许所有 Host（开发环境可用）
}

修改后，重新启动 Vite 开发服务器 （Ctrl + C 停掉再 pnpm dev）即可生效。

方法二：启动 Vite 时添加参数

不修改配置文件，直接通过命令行参数允许该域名：

pnpm dev -- --host --allowedHosts recharger-serve-drippy.ngrok-free.dev

或者更简单，允许所有 Host：

pnpm dev -- --host --allowedHosts all

方法三：启动时指定 Host 为 0.0.0.0

让 Vite 监听所有网络接口，同时关闭 Host 检查：

pnpm dev -- --host 0.0.0.0 --allowedHosts all

Serveo（最简单，无需安装）

如果你追求极致的简单，Serveo 是最快的选择。它甚至不需要你在电脑上安装任何软件，直接利用系统自带的 SSH 命令即可

1.暴露本地服务 ：假设你的 Vite 项目运行在 5173 端口，执行下面的命令，就会生成一个随机域名，访问它就能看到你的本地页面了

ssh -R 80:localhost:5173 serveo.net

2.自定义子域名：你可以给生成的域名起一个固定的名字，这样每次启动就不会变了

ssh -R <你的自定义名字>.serveo.net:80:localhost:5173 serveo.net

比如，你就可以用 recharger.serveo.net 来访问。

host

说明

hosts 文件确实可以实现"指定域名映射到本地"，但它的作用范围仅限于你自己的电脑，无法让其他人通过域名访问你本地的服务。

它的局限性非常明显：

• 仅限本机 ：hosts 文件只对修改了它的那台电脑生效。其他同事访问 my-project.test，看到的还是这个域名在互联网上的真实 IP 地址，而不是你的本地服务。
• 无法穿透网络 ：它只是把域名指向了你电脑的 IP，但你的电脑 IP（如 192.168.x.x）是内网地址，外网设备（比如不在同一个 Wi-Fi 下的同事）依然无法访问。

这只能解决"本地开发需要用特定域名"的模拟场景，而不是你要的"让外网朋友访问本地服务"。

使用流程

nano修改 hosts 文件的完整流程

1. 打开文件

终端中输入，打开文件

sudo nano /etc/hosts

2. 用方向键移动光标，直接打字修改内容

在最后一行增加类似

127.0.0.1   admin.stage.xxx.cn

3. 修改完成后，按Ctrl + O保存

• 屏幕底部显示 "File Name to Write: /etc/hosts"
• 直接按回车确认

4. 按 Ctrl + X 退出

微信登录开发

修改本地Hosts文件（适用于已有正式域名）

如果你已经在微信后台配置了一个正式域名（如www.yourdomain.com），可以通过修改本地Hosts文件，让这个域名指向你的本地IP。

1. 获取正式域名：确保 www.yourdomain.com 已配置在微信后台的"授权回调域"中。
2. 修改Hosts文件：在本地Hosts文件中添加一条映射：127.0.0.1 www.yourdomain.com
3. 启动本地服务：确保你的本地开发服务器监听在80端口（因为微信的授权回调域默认是80端口）。如果你的服务在其他端口（如8080），则需要通过Nginx等Web服务器进行端口转发。

这样，当微信将用户重定向到 www.yourdomain.com 时，请求会被直接发送到你的本地电脑，从而完成调试。

cpolar Web UI

后续补充