Vue CLI 升级至 v5（Webpack 5 + webpack-dev-server v4）后，vue-cli-service serve 编译成功但页面不自动刷新或更新，根本原因在于 webpack-dev-server v4 的 devMiddleware 默认行为变更：index: false 禁用了 HTML 入口服务，且 publicPath 未显式配置导致资源路径解析异常。
vue cli 升级至 v5（webpack 5 + webpack-dev-server v4）后，`vue-cli-service serve` 编译成功但页面不自动刷新或更新，根本原因在于 webpack-dev-server v4 的 `devmiddleware` 默认行为变更：`index: false` 禁用了 html 入口服务，且 `publicpath` 未显式配置导致资源路径解析异常。
在 Webpack 5 与 webpack-dev-server v4 的升级过程中，devServer 配置发生了显著变化——尤其是 devMiddleware 选项不再默认启用 HTML 文件服务，这直接导致 HMR（Hot Module Replacement）虽已触发、编译完成，但浏览器无法正确加载更新后的模块资源，表现为“编译成功却无视觉变化”。
关键修复点在于 显式配置 devMiddleware，确保开发中间件能正确托管和提供入口 HTML 及静态资源：
// vue.config.js（升级后推荐配置）
module.exports = {
// ...其他配置保持不变
devServer: {
port: 8888,
proxy: {
'/': {
target: 'http://localhost:8081/',
ws: true,
changeOrigin: true,
secure: false,
},
},
allowedHosts: 'all',
devMiddleware: {
publicPath: '/', // ✅ 必须显式设置，与 publicPath 选项一致，确保资源 URL 解析正确
index: true, // ✅ 恢复默认行为：启用 index.html 自动服务（如访问 / 时返回 index.html）
writeToDisk: true, // ✅ 保留磁盘写入（如需后端读取构建产物）
},
static: {
directory: path.join(__dirname, 'public'),
},
},
};
⚠️ 注意事项：
-
publicPath在devMiddleware中必须与vue.config.js根级publicPath值严格一致（通常为'/'或''），否则 HMR 会尝试从错误路径（如http://localhost:8888/js/app.js→http://localhost:8888//js/app.js）拉取更新模块，导致 404； -
index: true是关键：v4 中默认为false，意味着即使你访问http://localhost:8888/，中间件也不会自动返回index.html，导致 SPA 路由无法正常启动，HMR 更新亦无法注入； - 若使用
writeToDisk: true，请确认后端（如 Spring Boot）静态资源路径与outputDir一致，避免本地开发时读取旧文件； - 不建议在
devServer中重复配置contentBase（已废弃）或disableHostCheck（由allowedHosts替代）。
✅ 验证方式：启动服务后，在浏览器控制台执行 location.reload()，观察是否立即反映最新修改；同时打开 Network 面板，筛选 XHR 或 Fetch，应可见 hot-update.json 和 hot-update.js 请求成功（状态码 200），表明 HMR 通道已打通。
此配置兼容 Vue CLI v5 默认的 @vue/cli-service 内置 Webpack 5 构建流程，无需额外安装 webpack-dev-server 或调整 chainWebpack 中的 HMR 插件——Vue CLI 已自动集成并启用 hot: true 与 client: { overlay: true }。
