vue配置本地ip访问Invalid Host header

这个错误一般是由于Vue项目的配置文件中设置了不正确的`publicPath`或`devServer.public`导致的。你可以尝试以下几种方法来解决这个问题：

1. 在`vue.config.js`中添加以下代码：

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

这将允许你使用本地IP地址访问你的Vue应用。

2. 将`publicPath`设置为`'/'`：

module.exports = {
  publicPath: '/',
  // ...
}

3. 将`devServer.public`设置为你的本地IP地址：

module.exports = {
  devServer: {
    public: '192.168.1.100', // 你的本地IP地址
    // ...
  },
  // ...
}

这样就可以通过本地IP地址访问你的Vue应用了。

相关问题

本地内网穿透vue2 Invalid Host header

这个错误通常是由于使用了反向代理或负载均衡器等中间件，导致请求的 Host 头与实际的主机名不一致而引起的。解决这个问题需要修改 Vue.js 项目的配置。

你可以在 `config/index.js` 文件中添加一行配置：

dev: {
  // ...
  disableHostCheck: true
},

这样就可以关闭 Vue.js 开发服务器对 Host 头的检查，从而解决该问题。请注意，这样可能会存在一定的安全风险，因此请酌情使用。

如果你使用的是 Vue CLI 3.x，可以在 `vue.config.js` 文件中添加以下配置：

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

这样也可以达到同样的效果。

vue2花生壳 Invalid Host header

这个错误通常是由于花生壳反向代理的设置不正确导致的。您需要在项目的 `config/index.js` 文件中进行如下设置：

module.exports = {
  // ...
  dev: {
    // ...
    // 添加下面这一行
    disableHostCheck: true
  }
}

然后重新启动项目即可。这个设置将禁用 Webpack 的 Host 检查，允许请求的 Host 与预期的 Host 不一致。注意，这样设置存在一定的安全风险，因此在开发环境中使用时要小心。在生产环境中，建议使用真实的域名，而不是花生壳提供的域名。