vue实现内网穿透

vue实现内网穿透

内网穿透允许外部网络访问本地开发环境，常用于Vue项目的联调或演示。以下是几种常用方法：

使用ngrok工具 注册ngrok账号并下载客户端，获取authtoken后运行以下命令：

ngrok http 8080

启动后会将本地8080端口映射到ngrok提供的公网地址，支持HTTPS。免费版有会话时长限制，企业版可配置自定义域名。

使用localtunnel 通过npm全局安装localtunnel：

npm install -g localtunnel
lt --port 8080 --subdomain yourname

随机分配二级域名（yourname可自定义），适合临时测试。网络延迟较低但稳定性一般。

frp自建穿透服务 在公网服务器部署frps服务端，本地运行frpc客户端。配置frpc.ini文件：

[common]
server_addr = x.x.x.x
server_port = 7000

[vue-web]
type = tcp
local_ip = 127.0.0.1
local_port = 8080
remote_port = 6000

通过服务器IP:6000即可访问本地服务。需自行维护服务器，适合长期使用场景。

Cloudflare Tunnel 零信任方案，无需暴露公网IP。安装cloudflared后执行：

cloudflared tunnel --url http://localhost:8080

自动生成随机的*.trycloudflare.com域名，企业版支持CNAME接入自定义域名。

修改Vue配置 在vue.config.js中设置devServer允许外部访问：

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

配合路由器端口转发可实现局域网访问，但需公网IP且存在安全风险。

注意事项

• 生产环境禁止直接暴露开发服务器
• 临时测试推荐ngrok/localtunnel
• 长期使用建议frp/Cloudflare方案
• 启用HTTPS防止流量劫持
• 防火墙需放行对应端口