laravel homestead 上的 webpack-dev-server答案

【问题标题】：Webpack-dev-server on laravel homesteadlaravel homestead 上的 webpack-dev-server
【发布时间】：2017-09-27 08:49:13
【问题描述】：

我正在使用 Laravel/Homestead 开发一个 Laravel-Vue 应用程序。 Vue 代码使用 laravel-mix 编译，全部使用全新安装（这是一个新项目）。

我希望能够在 Laravel 项目的“外部”测试我的 Vue 组件。所以我想我只是

1) 像这样在 package.json 中添加一个脚本

"devser": "cross-env NODE_ENV=development webpack-dev-server",

2) 添加一个入口点 main.js 文件，我可以在其中独立运行我的组件

import Vue from 'vue'
import Example from './components/Example.vue'

new Vue({
  el: '#app',
  render: h => h(Example)
})

3) 添加一个 webpack.config.js 文件来为这个独立的应用程序配置 webpack。我只是从 vuejs 模板中获取它：webpack-simple 并更改了入口点路径。

到目前为止，运行 devser 脚本确实编译代码没有错误，并且显然，代码在（webpack 输出）处提供

Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html

但是，打开 localhost:8080 会报错：无法访问此站点，localhost 拒绝连接。所以我已经搜索了一段时间，发现了关于 devserver 代理和类似的东西，但我不明白我需要添加到我的 webpack.config.js 中的内容。

也许需要注意：我在这里对从这些 Vue 组件调用 Laravel 后端不感兴趣，它只是为了以隔离的方式测试组件。我的下一步是将 Vue-storybook 添加到聚会中来做到这一点。

总而言之，我正在寻找一个代码库（Laravel + Vue on Homestead），我可以在其中单独测试组件。任何帮助将不胜感激。

编辑：如果我没有登录到 vagrant 机器，我可以导航到项目文件夹并运行

npm run devser

在 localhost:8080 为项目提供服务，并且此 URL 确实有效。所以我现在有一个解决方法。

【问题讨论】：

【解决方案1】：

听起来你在 Homestead 盒子里运行 webpack-dev-server。如果是这样，您需要将端口 8080 从您的主机转发到 Vagrant 框：

将此添加到您的Homestead.yaml：

ports:
    - send: 8080
      to: 8080

然后，运行 vagrant reload --provision 以应用更改。

现在您应该可以查看 http://localhost:8080/

【讨论】：