Node.js 在Cloud9 IDE（容器）中使用Vue CLI:&x27；无效的主机头'；

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

这就是我所做的：

• 创建了一个名为

  practice

• 通过

  npm安装vue安装vue

• 通过

  npm install@vue/cli安装vue cli

• 无论这是什么安装

  npm install@vue cli service global

  （请回答此问题）
• 通过

  vue创建登录系统创建了名为
  login system
  的项目

• Ran

  vue serve

当服务器在该命令后启动时，我转到，它只是说“无效主机头”，在服务器控制台或客户端控制台中没有错误。如果服务器启动失败，它会显示一个页面，默认情况下会显示“没有应用程序正在运行…”之类的内容

走向或全部产生相同的结果

当我通过最后一项运行服务器时，

vue-serve

IDE中的服务器选项卡显示

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

我还没有发现医生对解决我的问题太有用

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

---

编辑：

一点挖掘表明我应该将其添加到我的

webpack.config.js

：

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

---

我知道Vue CLI构建在webpack之上，但我在任何地方都找不到配置文件，创建一个配置文件似乎也无济于事。我还遇到了一个关于

vue.config.js

的解决方案，但我不知道如何构造其中的内容，也不知道将其放在哪个目录中

为了让

vue cli

拾取

vue.config.js

，它应该与

package.json

和

src

文件夹位于同一文件夹中

Vue cli检查文件是否存在以及是否从中导出对象。 配置选项可在和选项中找到。请注意，

vue cli

提供自定义选项来配置应用程序，这意味着让我们的生活更轻松，例如

devServer

、

outputDir

，同时有效地将它们合并成一个完整的

webpack.config.js

。因此，在不公开配置文件本身的情况下，它避免了调试webpack的许多麻烦，同时保持足够的控制来定制配置

无论如何，

vue.config.js

的以下内容将调整

webpack

配置以解决您的问题：

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

---

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

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

---

如有必要，用正确的区域替换

us-east-1

。

这是正确答案。我仍然收到“您可能使用了错误的$PORT…”消息，但点击Preview>Preview运行应用程序（在更新vue.config.js之后）对我来说很有效。