vue实现内网穿透

内网穿透的基本概念

内网穿透是一种将本地内网服务暴露到公网的技术，适用于开发调试、临时演示等场景。Vue项目本身是前端应用，但通常需要与后端API联调，因此穿透的是本地开发服务器（如webpack-dev-server）。

方法一：使用 ngrok

ngrok 是一个流行的内网穿透工具，支持HTTP/HTTPS协议，配置简单。

1. 安装ngrok
   从ngrok官网下载并安装，或通过包管理器安装：

   brew install ngrok/ngrok/ngrok  # macOS
   choco install ngrok             # Windows

2. 启动Vue开发服务器
   确保Vue项目运行在本地端口（默认8080）：

   npm run serve

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

   ngrok http 8080

   终端会显示公网URL（如https://abc123.ngrok.io），通过该URL即可访问本地Vue项目。

方法二：使用 frp

frp 是一个高性能的反向代理工具，适合自定义部署。

1. 下载frp
   从frp GitHub下载对应系统的版本。

2. 配置服务端（需公网服务器）
   编辑frps.ini：

   [common]
   bind_port = 7000

3. 配置客户端
   编辑frpc.ini：

   [common]
   server_addr = your_server_ip
   server_port = 7000
   
   [vue_app]
   type = http
   local_port = 8080
   custom_domains = your_domain.com

4. 启动服务端和客户端

   

   ./frps -c frps.ini        # 服务端
   ./frpc -c frpc.ini        # 客户端

方法三：使用 Cloudflare Tunnel

适合已有Cloudflare账户的用户，无需暴露服务器IP。

1. 安装Cloudflared
   参考Cloudflare文档安装客户端。

2. 创建隧道
   运行命令并登录Cloudflare账户：

   cloudflared tunnel create vue_tunnel

3. 配置隧道
   编辑配置文件config.yml：

   tunnel: vue_tunnel
   credentials-file: /path/to/credentials.json
   ingress:
     - hostname: vue.yourdomain.com
       service: http://localhost:8080

4. 启动隧道

   cloudflared tunnel run vue_tunnel

注意事项

• 安全性：确保穿透的服务不包含敏感数据，必要时添加认证。
• 带宽限制：免费工具（如ngrok）可能有带宽或连接数限制。
• HTTPS支持：部分工具需付费才能自定义域名或启用HTTPS。

通过上述方法，可以快速将本地Vue项目暴露到公网，方便测试或协作。