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

时间:2018-10-24 00:41:50

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

我正在尝试在云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.iohttp://practice-myusername.c9user.io/anywherehttp://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的解决方案,但是我不知道如何在其中构造内容,也不知道将其放入哪个目录。

2 个答案:

答案 0 :(得分:5)

为了让vue-cli拿起vue.config.js,它应该与package.jsonsrc文件夹位于同一文件夹中。

Vue-cli检查文件是否存在以及是否从文件中导出了对象。 可以在official vue-cli docsdevServer选项中找到配置选项。请注意,vue-cli提供了用于配置应用程序的自定义选项,旨在简化我们的生活,例如devServeroutputDir等,同时将它们有效地合并为一个完整的{{1} }。因此,在不暴露配置文件本身的情况下,它使我们免于调试Webpack的麻烦,同时保留了足够的控制权来自定义配置。

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

webpack

答案 1 :(得分:0)

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

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

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