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

Question

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

这是我所做的：

• 创建了一个名为 practice
• 通过安装vue npm install vue
• 通过安装Vue CLI npm install @vue/cli
• 无论安装了什么npm install @vue-cli-service-global（对此表示满意）
• 创建了一个名为项目login-system通过vue create login-system
• 然 vue serve

当服务器在执行该命令后启动时，我转至http://practice-myusername.c9user.io:8080，其中仅显示“ Invalid Host header”（无效的主机头），服务器控制台或客户端控制台中没有错误。如果服务器无法启动，则默认情况下会显示一个页面，上面写着“没有应用程序正在运行...”。

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

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

您的服务器应用程序可能使用了错误的端口和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
}