vuecli页面 使用frp内网穿透 实现远程访问热更新

前提有云服务器及公网ip

frp的部署

参考我之前写的 frp 内网穿透 实现外网远程桌面 （Windows+linux）

这里再补充
服务端frps.ini 对访问 Web服务器自定义端口
frpc.ini 对 web页面的部署
vue.config.js 运行访问host的配置

frps.ini 补充

vhost_http_port = 8080  #访问客户端web服务自定义的端口号

frp.ini补充

在frp.ini额外 添加以下代码 配置多个web页面客户端

[web]
type = http
# 本地ip地址
local_ip = 127.0.0.1
#本地访问的端口
local_port = 8080
#定义域名 （公网IP或者域名）
custom_domains = xxx.xxx.230.54

[web2]
type = http
local_ip = 127.0.0.1
local_port = 8081
custom_domains = xxxx
[web3]
type = http
local_ip = 127.0.0.1
local_port = 8082
custom_domains = www.xxx.com

如果你没有域名 且需要用 ip+端口方式 (类似本地)可以采用tcp方式传输 具体原因 暂时还不错的
但是是tcp 方式 web 的http 可以访问

[web tcp]
type = tcp
local_ip = 127.0.0.1
#本地访问的端口
local_port = 8080
remote_port = 8080

[web tcp 02]
type = tcp
local_ip = 127.0.0.1
local_port = 8081
remote_port = 8081

[web tcp 03]
type = tcp
local_ip = 127.0.0.1
local_port = 8082
remote_port = 8082

这样就可以通过 公网ip+端口 访问 无需加域名

vue.config.js 配置

devServer: {
host: '127.0.0.1',
disableHostCheck: true, //如果报错  Invalid Host header  设置这个跳过检查host
}

注意 以上使用的端口 的权限都要开放 （腾讯云 在宝塔防火墙处添加; 宝塔在安全处添加

到这里 可以实现外网访问本地web页面了
xxx.xxx.230.54:8080 访问web1
…
www.xxx.com:8080 访问web3
访问的端口都是 frps.ini vhost_http_port 设置的 8080

实现vue外网的热更新

如果无法热更新修改以下文件
node_modules =》webpack-dev-server=》client=》index.js

  // 自定义 __resourceQuery
  var  __resourceQuery = "?"+ 你的公网ip +端口