31

我在自己的开发服务器上运行 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;
  }
}
4

6 回答 6

87

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

module.exports = {
  devServer: {
    disableHostCheck: true
  }
}
于 2018-09-20T18:42:37.193 回答
19

通常不建议这样做disableHostCheck: true(因为这可能会导致安全问题),除非您了解并接受风险。

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

在 vue.config.js 的应用根目录中添加

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

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

于 2020-05-31T12:22:46.743 回答
5

2022 年 2 月更新:

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

在此处输入图像描述

然后,将此代码粘贴到以下位置vue.config.js

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

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

于 2021-07-23T03:02:48.477 回答
3

抱歉,这是由于我的错误,我忘记在其中添加 disableHostCheck 变量

构建/webpack.dev.conf.js

添加以下内容解决了我的问题

disableHostCheck: config.dev.disableHostCheck, 
于 2018-06-29T08:27:58.903 回答
2

我的配置在:projects/vue-try/node_modules/@vue/cli-service/lib/options.js

线 130+

devServer:{ disableHostCheck:真,主机:'0.0.0.0',https:假}

于 2021-03-12T12:25:04.437 回答
-1

我相信您需要像这样更改 nginX 配置

server {
  server_name prajin.prakash.com;
  listen 80;
  listen [::]:80;

  location / {
    proxy_pass http://localhost:8080;
    proxy_http_version 1.1;
  }
  location /sockjs-node {
    proxy_pass http://localhost:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade websocket;
    proxy_set_header Connection upgrade;
  }
}

编辑:

为 WebSocket 和普通请求添加了单独的代理。

于 2018-06-28T16:01:36.817 回答