在 Cloud9 IDE（容器）中使用 Vue CLI：“无效的主机标头”答案

【问题标题】：Using Vue CLI in Cloud9 IDE (container): 'Invalid Host Header'在 Cloud9 IDE（容器）中使用 Vue CLI：“无效的主机标头”
【发布时间】：2019-03-28 07:32:53
【问题描述】：

我正在尝试在 cloud 9 上使用 Vue CLI，并遵循所有安装指南，但我不是后端人员，所以我很难弄清楚为什么页面在每个页面上都显示“无效主机标头” .

这就是我所做的：

创建了一个名为practice 的新工作区
通过npm install vue安装vue
通过npm install @vue/cli安装了vue cli
安装了 npm install @vue-cli-service-global 的任何东西（如果回答这是什么将不胜感激）
通过vue create login-system 创建了一个名为login-system 的项目
跑vue serve

当服务器在该命令之后启动时，我去了http://practice-myusername.c9user.io:8080，它只是说“无效的主机头”服务器控制台或客户端控制台没有错误。如果服务器无法启动，它将显示一个页面，默认情况下显示“这里没有应用程序正在运行......”或类似的东西。

转到http://practice-myusername.c9user.io 或http://practice-myusername.c9user.io/anywhere 或http://practice-myusername.c9user.io/aradfa99asd 都会产生相同的结果。

每当我通过最后一项运行服务器时，vue serve IDE 中的服务器选项卡都会显示

您的服务器应用程序可能使用了错误的端口和 IP。尝试传递 $PORT 和 $IP 以正确启动您的应用程序。您可以在our docs找到更多信息

我还没有发现该文档对解决我的问题太有用。

发生了什么事？同样，我不知道任何后端的东西，所以详细的回答/响应将不胜感激。

编辑：

一点点挖掘表明我应该将其添加到我的webpack.config.js：

 devServer: {
    compress: true,
    disableHostCheck: true,
 }

我知道 Vue CLI 构建在 webpack 之上，但是我在任何地方都找不到配置文件，并且创建一个似乎没有帮助。我也遇到了一个关于vue.config.js 的解决方案，但我不知道如何构造其中的内容，也不知道将其放入哪个目录。

【问题讨论】：

标签： node.js vue.js server vue-cli

【解决方案1】：

为了让vue-cli 获取vue.config.js，它应该位于与package.json 和src 文件夹相同的文件夹中。

Vue-cli 检查文件是否存在以及对象是否从中导出。配置选项可以在official vue-cli docs 和devServer 选项中找到。请注意，vue-cli 提供了自定义选项来配置应用程序，这旨在让我们的生活更轻松，例如devServer、outputDir 等，同时有效地将它们合并成一个完整的webpack.config.js。因此在不暴露配置文件本身的情况下，它避免了我们调试 webpack 的很多麻烦，同时保持足够的控制来自定义配置。

不管怎样，下面vue.config.js的内容会调整webpack的配置来解决你的问题：

module.exports = {
  devServer: {
    disableHostCheck: true
  },
  // ... other options
}

【讨论】：

这是正确答案。我仍然收到“您可能使用了错误的 $PORT...”消息，但点击 Preview > Preview Running Application（更新 vue.config.js 后）对我有用。

【解决方案2】：

aBiscuit 解决方案有效，但热模块重新加载 (HMR) 不起作用。这似乎很容易解决...

module.exports = {
  devServer: {
    public: `${process.env.C9_PID}.vfs.cloud9.us-east-1.amazonaws.com`,
  },
  // ... other options
}

如有必要，将us-east-1 替换为正确的区域。

【讨论】：