Vuejs应用显示无效的主机头错误循环

Question

我在自己的开发服务器上运行vuejs应用程序，现在可以通过计算机的公共IP访问该站点，但是使用nginx将其指向一个域后，它在控制台中显示了一个错误循环

控制台错误

无效的主机头[WDS]已断开连接！

因此，脚本，样式注入和自动重新加载无法正常工作。

开发服务器的配置

dev: {
  assetsSubDirectory: "static",
  assetsPublicPath: "/",
  disableHostCheck: true,
  host: "0.0.0.0", // '192.168.2.39',//can be overwritten by 
  process.env.HOST
  port: 8080,
  autoOpenBrowser: false,
  errorOverlay: false,
  notifyOnErrors: false,
  poll: true, 
  devtool: "cheap-module-source-map",
  cacheBusting: true,
  cssSourceMap: true
},

域的nginx配置

server
{
  listen 80 ;
  listen [::]:80;
  server_name prajin.prakash.com;
  location / {
        proxy_pass http://localhost:8081;
  }
}

Answer 1

在 webpack-dev-server@v3 中：

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

在 webpack-dev-server@v4 中，该选项disableHostCheck已被删除，请改用allowedHosts：

module.exports = {
  devServer: {
    // 'auto' | 'all' [string] here
    allowedHosts: 'all',
  },
};

请参阅此处的文档https://webpack.js.org/configuration/dev-server/#devserverallowedhosts

Answer 2

我相信你需要改变 vue.config.js

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

Answer 3

2022 年 2 月更新：

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

然后，将此代码粘贴到vue.config.js：

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

*不要忘记重新启动服务器，否则更改不会反映出来。

Answer 4

一般不建议这样做disableHostCheck: true（因为它可能会导致安全问题），除非您了解并接受风险。

请改为尝试如下设置 webpack 配置：

在 vue.config.js 的 app root 中添加

module.exports = {
  devServer: {
    public: 'subdomain.domain.ext:port'
  }
};

注意：适用于在 vuejs + nginx 上运行的应用程序

Answer 5

"vue": "^3.2.13",

"@vue/cli-service": "~5.0.0",

module.exports = {
  devServer: {
    allowedHosts: "all",
  },
};