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

Posted

技术标签:

【中文标题】如何为 Vue CLI 3 项目设置虚拟主机【英文标题】:How to Set Up Virtual Host for Vue CLI 3 Project 【发布时间】:2019-01-23 22:55:45 【问题描述】:

我希望能够从 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)

有谁知道我做错了什么?

【问题讨论】:

:8080 中的/etc/hosts 是问题所在,只需执行127.0.0.1 pbdev 啊,太棒了! @EricGuan 如果您想将其发布为答案,我会接受。谢谢你的帮助! :) 【参考方案1】:

/etc/hosts 中的:8080 是问题所在,只需执行127.0.0.1 pbdev

快乐 Vueing!

【讨论】:

【参考方案2】:

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

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

【讨论】:

谢谢! :) 我所做的几乎奏效了。我只是错误地将端口号包含在我的/etc/hosts 文件中。通过在vue.config.js 文件中指定它,我不必在每次启动服务器时一遍又一遍地指定它。现在效果很好。

以上是关于如何为 Vue CLI 3 项目设置虚拟主机的主要内容,如果未能解决你的问题,请参考以下文章

如何为本地主机测试运行设置虚拟目录?

如何为虚拟主机设置 htaccess 文件?

如何为python项目创建虚拟环境

如何为 Apache 2.4/ubuntu 13.10 及更高版本设置虚拟主机?

如何为开发机器设置本地绑定服务器以映射到服务器上的虚拟主机

带有 Webpack 模块联合的 Vue 3 CLI:组件从错误的主机加载