Vue CLI 5（Webpack 5 + webpack-dev-server v4）升级后，vue-cli-service serve 编译成功但页面不自动刷新或更新，根本原因在于 devServer.devMiddleware 配置缺失关键参数，需显式设置 publicPath 和启用 index。
vue cli 5（webpack 5 + webpack-dev-server v4）升级后，`vue-cli-service serve` 编译成功但页面不自动刷新或更新，根本原因在于 `devserver.devmiddleware` 配置缺失关键参数，需显式设置 `publicpath` 和启用 `index`。
在从 Vue CLI 4（webpack-dev-server v3）升级至 Vue CLI 5（webpack-dev-server v4）的过程中，devServer 的配置结构发生重大变更：v4 版本将中间件逻辑拆分为 devMiddleware（处理编译资源服务）和 static（处理静态文件托管），且默认行为更严格——不再隐式提供 /index.html 响应，也不再自动推断资源根路径。这直接导致 HMR（Hot Module Replacement）虽触发编译，但浏览器无法正确加载更新后的模块，表现为“编译完成”却页面无变化。
关键修复点在于 devServer.devMiddleware 配置：
✅ 必须显式指定 publicPath: "/" —— 确保开发服务器提供的资源 URL 路径与应用实际请求路径一致（尤其当 publicPath 在 vue.config.js 中设为 '/' 时）；
✅ 必须设置 index: true —— 启用对 / 请求自动返回 index.html，这是 SPA 路由和 HMR 正常工作的基础；
✅ writeToDisk: true 可保留（用于后端集成场景），但非热更新主因。
修正后的 vue.config.js devServer 片段如下：
devServer: {
port: 8888,
proxy: {
'/': {
target: 'http://localhost:8081/',
ws: true,
changeOrigin: true,
secure: false,
logLevel: 'debug',
},
},
allowedHosts: 'all',
devMiddleware: {
publicPath: '/', // ← 核心：匹配 publicPath 配置
index: true, // ← 核心：启用 index.html 自动响应
writeToDisk: true,
},
static: {
directory: path.join(__dirname, 'public/'),
},
open: {
app: { name: 'chrome', arguments: ['--incognito'] },
},
},
⚠️ 注意事项：
- 若项目使用了自定义
publicPath（如'/vue/'），则devMiddleware.publicPath必须与之完全一致； -
devMiddleware.index默认为false（v4 行为变更），设为true才能支持 HTML 热替换及路由 fallback； - 不要遗漏
allowedHosts: 'all'（替代旧版disableHostCheck: true），否则跨域代理可能失败； -
static.directory仅服务public/下的静态文件，HMR 依赖的 bundle 由devMiddleware提供，二者职责分离。
升级后务必验证：修改 .vue 文件 → 控制台显示 DONE Compiled successfully → 浏览器控制台出现 [HMR] Updated modules: 日志 → 页面内容实时更新。若仍无效，请检查浏览器是否禁用了 HMR（如缓存强制刷新）、Vue Devtools 是否启用，或是否存在 node_modules 缓存残留（可尝试 rm -rf node_modules package-lock.json && npm install 彻底重装）。
