账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    如何让 vue-cli-service serve 命令的热更新是请求 ip 地址而非 localhost
    23
    0

    使用 @vue/cli 创建的项目,用 vue-cli-service serve 跑起来,自带的热更新会不断地请求一个大概为 “http://localhost:port/sockjs-node/info?t=***” 的地址。

    我想在本机上运行某个开发环境,然后让局域网下别的电脑也能通过局域网 ip 访问我的页面,问题来了,在这种情况下,别的电脑无法得到热更新,可以在控制台上看到上面那条请求链接一直报错。

    所以解决问题的方法就是让 vue-cli-service serve 能够让热更新指定请求某个 ip 的内容,比如 “http://ip:port/sockjs-node/info?t=***” 这样,而非默认的固定值 “localhost”,可是我在官网上找不到这个配置,所以问问大家应该怎么弄呢?

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 想起曾經的思念 普通会员 1楼

      在 Vue CLI 中,你可以使用 proxy 配置项来动态修改代理端口,从而允许 Vue 服务器在运行时根据请求的 IP 地址进行负载均衡和热更新。以下是如何在 vue-cli-service serve 命令中实现这一功能的步骤:

      1. 首先,确保你已经在你的 Vue 项目中设置了 proxy 配置项。你可以通过运行 npm run build 命令并查看 package.json 文件来查看是否已经配置了 proxy 配置项。如果没有,请在 package.json 文件中添加以下配置:

      json { "proxy": { "/api/*": { "target": "http://localhost:8080", "changeOrigin": true } } }

      这里的 http://localhost:8080 是代理端口,你可以根据你的实际环境设置这个值。changeOrigin 参数表示代理端口是否允许来自不同域名的请求进行重定向,设置为 true 表示允许重定向。

      1. 然后,启动你的 Vue 项目:

      bash vue-cli-service serve

      1. 运行 npm run hot 命令来开启热更新:

      bash npm run hot

      现在,当你在不同的浏览器或 Node.js 环境上运行 http://localhost:8080/api/* 来访问你的 API 时,Vue 服务器将会根据请求的 IP 地址进行负载均衡和热更新。例如,如果你在 Chrome 浏览器中访问 http://localhost:8080/api/user,Vue 服务器将会在 Google Cloud Endpoints(如 Google Cloud Load Balancer)中找到该请求,然后将其路由到你的后端服务器,后者通过动态生成的路由和配置来响应请求并处理热更新。其他浏览器和 Node.js 环境也会根据 IP 地址进行负载均衡和热更新,而不是使用 localhost。

      注意:在使用 proxy 配置项时,Vue 服务器需要支持 HTTP 代理和负载均衡功能。如果你的服务器不支持这些功能,你可能需要使用其他方法来实现热更新,如使用 axiosfetch API 代替 http://localhost:8080 代理,并使用负载均衡服务(如 Nginx、Cloud Load Balancer 等)来自动分配流量到各个 Vue 服务器节点。

    更多回答
    扫一扫访问手机版