Vue无效的主机头

Question

不知道为什么两天前我的项目（通过 vue create 创建）停止工作-在Chrome浏览器中我得到

  

无效的主机头

和

  

WDS断开连接

错误。在cmd中，所有内容均可正确编译（ npm run serve ） 我不知道webpack，所以我不知道如何解决它。

我已经做过的事情：

• 重新安装的节点
• 删除并重新安装了所有npm软件包

Answer 1

此问题是由最近修复的此webpack-dev-server issue引起的。

为避免出现无效的主机/来源标头错误，请将其添加到vue.config.js文件的devServer条目中：

disableHostCheck：是

Answer 2

在搜索相同的“无效主机头”问题时发现了此问题。这是我解决的方法。

我正在远程服务器上的Docker中运行Vue开发服务器npm run serve。上面的错误消息无法在http://example.com:8080上访问它。

正确和安全的方法是将域名添加到vue.config.js文件中：

"devServer": {
  "public": "example.com"
}

这是一个新的Vue项目，由Vue Cli命令vue create myproject启动，并通过vue add vuetify添加了Vuetify。之后，我的vue.config.js的全部内容是：

module.exports = {
  "transpileDependencies": [
    "vuetify"
  ],
  "devServer": {
    "public": "example.com"
  }
}

Answer 3

请注意，不推荐使用 disableHostCheck: true，因为它会创建 security vulnerabilities。

对于在我的本地机器上运行的开发服务器，我可以通过在 --host 中显式设置 vue-cli-service serve 来解决该问题：

scripts: {
  serve: "vue-cli-service serve --host myapp.localhost"
}

--host 选项记录在 here。

在浏览器中的 myapp.localhost:8080 下访问该应用（假设您使用的是默认端口 8080）。

Answer 4

在项目根目录下创建vue.config.js：

然后，将以下代码添加到vue.config.js：

module.exports = {
  devServer: {
    disableHostCheck: true
  }
}

最后，您必须再次运行该命令：

npm run serve