33

我使用 vagrant 并且我已将其配置为更新我的 etc/host 文件，这是一个示例。

10.20.1.36  example.dev

然后我可以使用http://example.dev/访问 VM 的 apache 服务器

我想从命令行使用 browsersync，但我无法访问我的网站。我在我的 mac 主机和 vagrant VM 上安装了 browsersync。我已经使用以下命令在我的 mac 和 VM 上进行了尝试，但它在这两种环境中都不起作用。

browser-sync start --proxy "example.dev" --files "public/*.html,public/css/*.css,public/js/*.js"

这是我从 Mac 得到的

[BS] Proxying: http://example.dev
[BS] Access URLs:
 -------------------------------------
   Local: http://localhost:3000
External: http://192.168.0.10:3000
 -------------------------------------
      UI: http://localhost:3001
 UI External: http://192.168.0.10:3001
 -------------------------------------
[BS] Watching files...

这是虚拟机中发生的事情

[BS] Proxying: http://example.dev
[BS] Now you can access your site through the following addresses:
[BS] Local URL: http://localhost:3000
[BS] External URL: http://10.0.2.15:3000
[BS] Watching files...

当我在 mac 中运行它时，我可以在http://localhost:3001/访问 browsersync ui，但不能访问我的网站。

我不确定我应该在哪里运行它。我应该如何在浏览器中访问该网站。如果我需要转发 VM 中的任何端口。

在网上搜索会返回很多结果，但它们都是关于 grunt 或 gulp 的，我不使用它们中的任何一个。

编辑：我将端口转发添加到 vagrant，然后从 vm 中启动 browser-sync。现在一切正常http://example.dev:3000和http://example.dev:3001。

这是我添加到我的 Vagrantfile 中的内容： config.vm.network :forwarded_port, guest: 3000, host: 3000, auto_correct: true config.vm.network :forwarded_port, guest: 3001, host: 3001, auto_correct: true

4

3 回答 3

7

这是我如何让它工作的。

我将端口转发添加到 vagrant，然后从 vm 中启动 browser-sync。现在一切正常http://example.dev:3000和http://example.dev:3001。

这是我添加到我的 Vagrantfile 中的内容： config.vm.network :forwarded_port, guest: 3000, host: 3000, auto_correct: true config.vm.network :forwarded_port, guest: 3001, host: 3001, auto_correct: true

于 2016-03-23T19:46:54.293 回答
3

我知道这已经得到解答，我最初使用@KahunaCoder 的解决方案来启动和运行，所以谢谢！

但是，我发现在 Vagrant 中运行我的 gulpfile 非常慢！所以，我想我会发布这个解决方案以防万一。

我的主机文件是：

192.168.5.10    www.develop.local

我最终在我的 Vagrantfile 中使用了以下内容：

server_ip = "192.168.5.10"    
config.vm.network :forwarded_port, guest: 80, host: 3000, auto_correct: true

（Vagrant 中的 Apache 在端口 80 上运行。我没有打扰转发端口 3001，因为它仅用于访问 Browsersync UI）

我现在从项目中运行我的 Gulp 任务并获得以下信息：

[Browsersync] Proxying: http://www.develop.local
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://151.101.129.69:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://151.101.129.69:3001
 -------------------------------------

现在，当我打开时，http://localhost:3001我看到 Browsersync 控制中心，当我http://localhost:3000在各种浏览器中打开时，我看到我的开发站点和所有连接的浏览器都列在控制中心 - 因此它们与 Browsersync “同步”，并且可以集中受控和行动镜像。

提供的外部地址允许我通过同一网络上的其他设备连接到我的开发服务器。

于 2018-02-27T19:16:03.303 回答
2

1.- 我用的是盒子cerobox

2.-C:\Windows\System32\drivers\etc\host在windows上配置虚拟主机

192.168.33.10   exampleurl.app

3.-vagrant up在文件夹项目上运行

4.- 安装浏览器同步

npm install -g browser-sync

5.- 运行浏览同步

browser-sync start -p "exampleurl.app" -f "public, resources, otherfolder, namefiles, etc"

您将看到有关设备连接的此信息

[BS] Proxying: http://exampleurl.app
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.77:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.77:3001
 -------------------------------------
[BS] Watching files...

6.-使用这个ip连接

http://192.168.1.77:3000
于 2017-06-14T17:36:58.013 回答