Webpack-dev-server 不热重载

Question

我们最近升级到 NodeJS 20，并且必须升级很多其他东西。 我们从 vue/cli-service 4 -> 5 和 Webpack 4 -> 5 进行了更新，这将我们的 webpack-dev-server 更改为 v4

我们面临的问题是通过 vue-cli-service 运行我们的开发服务器。 它在端口 8888 上启动正常，没有错误，当我们更改 .vue 文件时，它会显示：

等待编译...
下午 3:14:59

正在编译...

DONE 590ms 编译成功
下午 3:15:00

应用程序运行于：

• 本地：http://localhost:8888/
• 网络：http://localhost:8888/

主要问题是，当我在本地访问8888端口上更改的页面时，它没有显示更改。在升级之前这一切都工作正常。我遵循了 webpack-dev-server 迁移指南，我相信我已经纠正了所有内容。我包括了 vue.config.js 文件之前和之后的内容。

这是我的配置文件。

webpack.config.js

const webpack = require('webpack');
    
    module.exports = {
      module: {
        rules: [
          {
            test: /\.scss$/,
            use: [
              'vue-style-loader',
              'css-loader',
              'sass-loader',
            ],
          },
        ],
      },
      mode: 'development',
    
      plugins: [
        new webpack.DefinePlugin({
          'process.env.NODE_ENV': JSON.stringify('production'),
        }),
      ],
    
    };

vue.config.js（迁移前，webpack-dev-server 3.x.x）

const path = require('path');
const WebpackAssetsManifest = require('webpack-assets-manifest');
const packageJSON = require('./package.json');
const outputDirectory = `target/classes/dist/${packageJSON.name}/vue`;

module.exports = {
  assetsDir: 'static',
  lintOnSave: true,
  // Use a relative path for assets
  publicPath: process.env.NODE_ENV === 'production' ? '/vue/' : '/',

  outputDir: outputDirectory,
  productionSourceMap: false,
  transpileDependencies: ['vue-resource'],
  devServer: {

    proxy: {
      '/': {
        target: 'http://localhost:8081/', // this configuration needs to correspond to the Spring Boot backends' application.properties server.port
        ws: true,
        changeOrigin: true,
      },
    },

    disableHostCheck: true,
    writeToDisk: true,
    port: 8888,
    contentBase: [
      path.join(__dirname, 'public'),
    ],
  },
  chainWebpack: (config) => {
    config.optimization.splitChunks({
      chunks: 'all',
    });

    // Register the webpack-assets-manifest plugin to generate an asset manifest
    config
      .plugin('assets-manifest')
      .use(WebpackAssetsManifest);
  },
  css: {
    extract: {
      filename: 'css/[name].css',
    },
  },
  configureWebpack: {
    output: {
      filename: 'js/[name].js',
    },
    resolve: {
      alias: {
        vue$: 'vue/dist/vue.esm.js',
      },
    },

  },
};

vue.config.js（迁移后，webpack-dev-server 4.x.x）

const path = require('path');
const WebpackAssetsManifest = require('webpack-assets-manifest');
const packageJSON = require('./package.json');
const outputDirectory = `target/classes/dist/${packageJSON.name}/vue`;

module.exports = {
  assetsDir: 'static',
  lintOnSave: true,
  // Use a relative path for assets
  publicPath: process.env.NODE_ENV === 'production' ? '/vue/' : '/',

  outputDir: outputDirectory,
  productionSourceMap: false,
  transpileDependencies: ['vue-resource'],
  devServer: {
    port: 8888,
    proxy: {
      '/': {
        target: 'http://localhost:8081/', // this configuration needs to correspond to the Spring Boot backends' application.properties server.port
        ws: true,
        changeOrigin: true,
        secure: false,
        logLevel: 'debug',
      },
    },
    allowedHosts: 'all',
    devMiddleware: {
      index: false,
      writeToDisk: true,
    },
    static: {
      directory: path.join(__dirname, 'public/'),
    },
    open: { // Opens browser in incognito mode
      app: {
        name: 'chrome',
        arguments: ['--incognito'],
      },
    },
  },
  chainWebpack: (config) => {
    config.optimization.splitChunks({
      chunks: 'all',
    });

    // Register the webpack-assets-manifest plugin to generate an asset manifest
    config
      .plugin('assets-manifest')
      .use(WebpackAssetsManifest);
  },
  css: {
    extract: {
      filename: 'css/[name].css',
    },
  },
  configureWebpack: {
    output: {
      filename: 'js/[name].js',
    },
    resolve: {
      alias: {
        vue$: 'vue/dist/vue.esm.js',
      },
    },
  },
};

Answer 1

解决了！ 我尝试了很多配置，并将其添加到 devMiddleware 中：

devMiddleware: {
  publicPath: "/",
  index: true,
  writeToDisk: true,
},

添加 publicPath 并将索引更改为

true

就可以了。谢谢大家！