vue实现内网穿透

使用 ngrok 实现 Vue 项目内网穿透

ngrok 是一个简单易用的内网穿透工具，可以将本地服务暴露到公网。

1. 下载并安装 ngrok
   访问 ngrok 官网，注册账号并下载对应操作系统的客户端。

2. 启动本地 Vue 开发服务器
   确保 Vue 项目已启动，默认运行在 http://localhost:8080（或其他端口）。

   npm run serve

3. 运行 ngrok 暴露本地端口
   在终端运行以下命令，将本地端口映射到公网：

   ngrok http 8080

   运行后会生成一个公网 URL（如 https://xxxx.ngrok.io），通过该 URL 即可访问本地 Vue 项目。

4. 配置自定义域名（可选）
   如果需要固定域名，可在 ngrok 官网购买并配置自定义域名。

使用 frp 实现内网穿透

frp 是一个高性能的反向代理工具，适合自建内网穿透服务。

1. 准备一台公网服务器
   需要一台具有公网 IP 的服务器作为 frp 服务端（如云服务器）。

2. 部署 frp 服务端
   下载 frp 并编辑服务端配置文件 frps.ini：

   [common]
   bind_port = 7000

   启动服务端：

   ./frps -c frps.ini

3. 配置本地 frp 客户端
   编辑客户端配置文件 frpc.ini：

   [common]
   server_addr = 公网服务器IP
   server_port = 7000
   
   [vue]
   type = http
   local_port = 8080
   custom_domains = 自定义域名或服务器IP

   启动客户端：

   ./frpc -c frpc.ini

4. 通过公网访问
   通过配置的域名或服务器 IP 访问本地 Vue 项目。

使用 Cloudflare Tunnel 实现内网穿透

Cloudflare Tunnel 无需公网 IP，直接通过 Cloudflare 的全球网络暴露本地服务。

1. 安装 Cloudflare CLI
   运行以下命令安装：

   npm install -g @cloudflare/cloudflared

2. 登录并创建 Tunnel
   登录 Cloudflare 账号并创建 Tunnel：

   cloudflared tunnel login
   cloudflared tunnel create 隧道名称

3. 配置 Tunnel
   编辑配置文件 config.yml：

   tunnel: 隧道ID
   credentials-file: 凭证文件路径
   ingress:
     - hostname: 自定义域名
       service: http://localhost:8080

4. 启动 Tunnel
   运行以下命令启动：

   cloudflared tunnel run 隧道名称

5. 通过域名访问
   在 Cloudflare DNS 中配置域名解析，即可通过域名访问本地 Vue 项目。

使用本地 IPv4 地址临时测试

如果仅需局域网内访问，可直接使用本地 IP 地址。

1. 获取本地 IPv4 地址
   在终端运行：

   ipconfig (Windows) 或 ifconfig (Linux/macOS)

   找到本地 IPv4 地址（如 192.168.x.x）。

2. 启动 Vue 项目并允许局域网访问
   修改 vue.config.js，添加 host: '0.0.0.0'：

   module.exports = {
     devServer: {
       host: '0.0.0.0',
       port: 8080
     }
   }

3. 局域网访问
   同一局域网内的设备可通过 http://本地IP:8080 访问项目。

   

以上方法可根据需求选择，ngrok 适合快速测试，frp 适合自建服务，Cloudflare Tunnel 适合无公网 IP 的场景。