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

Question

我希望能够从 http://pbdev 而不是 localhost:8080 访问我的 Vue 项目。我熟悉在 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)

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

Answer 1

多么好的问题！值得庆幸的是，Vue CLI 3 使用 --host 标志使它变得相当简单，您可以在其中传递自定义主机和 --port 自定义端口。您不必配置 Apache 或自定义 Web 服务器。

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

Answer 2

/etc/hosts中的:8080是问题所在，直接127.0.0.1 pbdev

Vueing 愉快！

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

How to Set Up Virtual Host for Vue CLI 3 Project

webpack

vue.js

vue-cli

vue-cli-3