Vite开发服务器HMR与Spring Boot集成失效问题求助

问题根源 #

你遇到的[no modules matched]日志说明：Vite检测到了文件变更，但该文件没有被任何Vite管理的模块纳入依赖树。Webpack的devServer代理是全量转发请求，而Vite的HMR依赖自身的模块系统追踪资源引用关系——如果页面资源是直接在Spring Boot渲染的HTML里用静态路径引入，Vite根本没法把这些资源和HMR模块关联起来。

具体修复步骤 #

1. 重构资源引入方式
   不要在HTML里直接写<link rel="stylesheet" href="/main.css">这类静态路径，而是创建对应页面的入口JS文件，在里面导入CSS、Vue组件等资源：

   // src/pages/index.js
   import '../main/css/main.css'
   import { createApp } from 'vue'
   import App from '../vue/App.vue'
   
   createApp(App).mount('#app')
   

   然后在HTML里引入Vite处理后的入口文件：

   <!-- 注意路径是Vite开发服务器的路径，不是静态资源路径 -->
   <script type="module" src="/src/pages/index.js"></script>
   

2. 配置Vite的MPA入口
   在vite.config.js里通过rollupOptions配置多页面入口，让Vite明确知道每个页面的模块起点：

   export default {
     server: {
       proxy: {
         '/': 'http://localhost:8080' // 和Webpack一致的代理配置
       },
       port: 8081
     },
     build: {
       rollupOptions: {
         input: {
           index: './src/main/resources/templates/index.html',
           // 其他页面入口同理
         }
       }
     }
   }
   

3. 确保通过Vite服务器访问页面
   开发时不要直接访问Spring Boot的8080端口，而是访问Vite的8081端口，这样所有资源都会经过Vite的模块系统处理，HMR才能追踪到依赖关系。

4. Vue组件的HMR适配
   确保Vue组件使用.vue单文件组件格式，Vite内置了Vue的HMR支持，只要组件被入口JS正确导入，修改后就能自动热更新。

验证 #

修改CSS或Vue组件后，查看Vite日志，如果不再出现[no modules matched]，而是显示[updated modules]相关日志，说明HMR已经正常工作。

内容的提问来源于stack exchange，提问作者Theiaz