WebSocket与'ws：// localhost：4000 / sockjs-node / 612 / 2pdjfv15 / websocket'的连接失败：在收到握手响应错误之前，连接已关闭

Question

我正在使用带有webpack-dev-server的Browser Sync，并且在使用浏览器同步时遇到了问题。只有表格填写有效，单击，滚动在浏览器同步中不起作用，并且没有发生任何编译时错误，但是以上这些都不起作用..！这是我的“ Webpack.dev.js”文件，那么这里有什么问题呢？

const helpers = require('./helpers');
const buildUtils = require('./build-utils');
const webpackMerge = require('webpack-merge'); 
const commonConfig = require('./webpack.common.js');

const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin');
const EvalSourceMapDevToolPlugin = require('webpack/lib/EvalSourceMapDevToolPlugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = function (options) {
  const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
  const HOST = process.env.HOST || 'localhost';
  const PORT = process.env.PORT || 3000;

  const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, {
    host: HOST,
    port: PORT,
    ENV: ENV,
    HMR: helpers.hasProcessFlag('hot'),
    PUBLIC: process.env.PUBLIC_DEV || HOST + ':' + PORT
  });

  return webpackMerge(commonConfig({ env: ENV, metadata: METADATA  }), {

    output: {


      path: helpers.root('dist'),


      filename: '[name].bundle.js',


      sourceMapFilename: '[file].map',


      chunkFilename: '[id].chunk.js',

      library: 'ac_[name]',
      libraryTarget: 'var',
    },

    module: {

      rules: [


        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader'],
          include: [helpers.root('src', 'styles')]
        },

        {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader'],
          include: [helpers.root('src', 'styles')]
        },

      ]

    },

    plugins: [
      new EvalSourceMapDevToolPlugin({
        moduleFilenameTemplate: '[resource-path]',
        sourceRoot: 'webpack:///'
      }),


      new NamedModulesPlugin(),


      new LoaderOptionsPlugin({
        debug: true,
        options: { }
      }),

      new BrowserSyncPlugin({
        // browse to http://localhost:3000/ during development,
        host: 'localhost',
        port: 4000,
        proxy: 'http://localhost:3000'
      },
      {
        reload: false
      })
    ],

    devServer: {
      port: METADATA.port,
      host: METADATA.host,
      hot: METADATA.HMR,
      public: METADATA.PUBLIC,
      historyApiFallback: true,
      watchOptions: {

        ignored: /node_modules/
      },

      setup: function(app) {
        // For example, to define custom handlers for some paths:
        // app.get('/some/path', function(req, res) {
        //   res.json({ custom: 'response' });
        // });
      },
    },

    node: {
      global: true,
      crypto: 'empty',
      process: true,
      module: false,
      clearImmediate: false,
      setImmediate: false,
      fs: 'empty'
    }

  });
};

Answer 1

我最近在 Angular 11 (Ivy) 中就遇到过这种情况。一般来说，该解决方案应该与 webpack-dev-server 相关——因为这是相同的行为。

当加载 webpack-dev-server 应用程序加载到单独的 Web 服务器端点上时，会出现此问题。sockjs-node 连接认为它需要使用相对于 Web 根目录的绝对 url ——这是行不通的，因为您的 Web 服务器根目录指向与开发 Web 服务器不同的进程/端口/主机。

我在互联网上搜索了要设置哪些 CLI 或属性来覆盖它使用的基础——我还没有找到任何东西（还没有！）

解决方案：每次进行更改时都构建项目并进行测试。一般来说，非生产构建只需要一分钟，所以还不错。