在Cloud9 IDE (容器)中使用Vue CLI：“无效主机头”

Question

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

我就是这样做的：

• 创建了一个名为practice的新工作区
• 通过npm install vue安装vue
• 通过npm install @vue/cli安装vue cli
• 安装任何这是npm install @vue-cli-service-global (请回答这是什么将不胜感激)
• 通过login-system创建了一个名为vue create login-system的项目
• Ran 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都会产生相同的结果。

当我在最后一项中运行服务器时，IDE中的vue serve服务器选项卡表示

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

我还没有发现医生对解决我的问题太有帮助了。

到底怎么回事？再次，我不知道任何后端的东西，所以详细的回答/回应将是非常感谢的。

编辑：

一点点的挖掘表明我应该把这个添加到我的webpack.config.js中

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

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

Answer 1

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

Vue-cli检查文件是否存在，以及是否从其中导出对象。配置选项可以在官方vue-cli文档和devServer选项中找到。请注意，vue-cli提供了自定义选项来配置应用程序，这是为了使我们的生活变得更容易，例如devServer、outputDir等，同时有效地将它们合并成一个完整的webpack.config.js。因此，在不公开配置文件本身的情况下，它可以防止我们在调试webpack的过程中遇到很多麻烦，同时保持足够的控制来自定义配置。

无论如何，vue.config.js的以下内容将调整webpack配置以解决您的问题：

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

Answer 2

aBiscuit解决方案有效，但热模块重新加载(HMR)不起作用。这似乎是一个简单的解决办法..。

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

必要时用正确的区域替换us-east-1。