如何为Vue CLI 3项目设置虚拟主机

Question

我希望能够从 http://pbdev 访问我的Vue项目，而不是 localhost:8080。我熟悉在Apache中创建虚拟主机，但不清楚如何在Vue CLI 3项目中实现此操作。

到目前为止，我已将以下内容放入 /etc/hosts 文件中：

# Vue Hosts
127.0.0.1:8080  pbdev

我把这个放在vue.config.js里：

module.exports = {
  lintOnSave: false,
  devServer: {
    host: 'pbdev',
    port: 8080,
    https: false
  }
}

我收到以下错误：

INFO  Starting development server...
10% building modules 1/1 modules 0 activeevents.js:167                            
  throw er; // Unhandled 'error' event
  ^

Error: getaddrinfo ENOTFOUND pbdev
  at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:57:26)
Emitted 'error' event at:
  at GetAddrInfoReqWrap.doListen [as callback] (net.js:1505:12)
  at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:57:17)

有人知道我做错了什么吗？

- Clifton Labrum

---

/etc/hosts 中的 :8080 是问题所在，只需使用 127.0.0.1 pbdev 即可。 - Eric Guan

啊，太棒了！@EricGuan 如果你想把它作为答案发布，我会接受的。感谢你的帮助！ :) - Clifton Labrum

Answer 1

在/etc/hosts文件中，:8080是问题所在，只需执行127.0.0.1 pbdev即可。祝您使用Vue愉快！

- Eric Guan

Answer 2

非常好的问题！幸运的是，Vue CLI 3通过--host标志使其相当简单，您可以传递自定义主机和--port以进行自定义端口。您不需要配置Apache或自定义Web服务器。

Vue CLI指南有一些细节：https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-serve。

- Sean Coleman

---

谢谢！ :) 我做的几乎成功了。我只是错误地在我的 /etc/hosts 文件中包含了端口号。通过在 vue.config.js 文件中指定它，我不必每次启动服务器时都指定它。现在它运行得非常好。 - Clifton Labrum