Question

我使用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...

以下是VM中发生的事情

[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中启动浏览器同步。现在一切都在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

Answer 1

以下是我如何使用它。

我将端口转发添加到vagrant，然后从vm中启动浏览器同步。现在一切都在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

Answer 2

我知道这已经得到了解答，我最初使用@ 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“同步”，可以集中控制和动作镜像。

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

Answer 3

1.-我使用了框cerobox

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

192.168.33.10   exampleurl.app

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

4.-安装browser-sync

npm install -g browser-sync

5.-运行browse-sync

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 conect

http://192.168.1.77:3000

如何在本地域中使用vagrant和browsersync？

3 个答案: