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的项目
冉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 serve IDE中的服务器选项卡都会显示

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

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

这是怎么回事？再说一次，我不知道任何后端的东西，所以详细的回答/答复将不胜感激。

编辑：

不断的挖掘表明我应该将其添加到我的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检查文件是否存在以及是否从文件中导出了对象。可以在official vue-cli docs和devServer选项中找到配置选项。请注意，vue-cli提供了用于配置应用程序的自定义选项，旨在简化我们的生活，例如devServer，outputDir等，同时将它们有效地合并为一个完整的{{1} }。因此，在不暴露配置文件本身的情况下，它使我们免于调试Webpack的麻烦，同时保留了足够的控制权来自定义配置。

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

webpack

Answer 2

aBiscuit解决方案有效，但是热模块重载（HMR）不起作用。这似乎很容易解决...

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

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

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

2 个答案: