如何从宿主机连接Vagrant虚拟机的localhost:3000端口？

别担心，这个端口问题其实很常见，咱们一步步来搞定它：

• 第一步：让Vue开发服务器监听所有网卡
  默认情况下，yarn dev启动的Vue项目只会绑定虚拟机的localhost（也就是127.0.0.1），这意味着只有虚拟机内部能访问，宿主机根本连不上。你可以直接修改启动命令，让它监听所有可用的网卡地址：

  yarn dev --host 0.0.0.0
  

  要是想一劳永逸，就在项目根目录新建或修改vue.config.js，添加devServer配置：

  module.exports = {
    devServer: {
      host: '0.0.0.0'
    }
  }
  

  这样下次启动yarn dev就自动监听所有地址了。

• 第二步：配置Homestead的端口转发
  现在项目在虚拟机的3000端口跑起来了，但宿主机还没法直接触达这个端口。你需要修改Homestead.yaml文件，添加端口转发规则：

  # 原有的站点配置保持不变
  sites:
      - map: consumer.test
        to: /home/vagrant/projects/Consumer
  
  # 新增端口转发部分
  ports:
      - send: 3000
        to: 3000
  

  保存文件后，重新加载Homestead配置：

  vagrant reload --provision
  

• 第三步：访问项目
  现在你有两种访问方式可选：

  1. 直接访问 consumer.test:3000（因为我们把虚拟机3000端口转发到了宿主机3000端口）
  2. 如果不想加端口号，可以把转发规则改成send: 80到to: 3000，这样直接访问consumer.test就行，但要确保宿主机80端口没被其他服务占用。

这样调整后，你应该就能正常访问Vue项目了！

内容的提问来源于stack exchange，提问作者A.C