如何修改Vue.js应用组件无需重启npm run dev开发服务器

• 这个效果默认就支持，完全不需要每次修改组件代码后手动重启npm run dev。不管是用Vue CLI搭建的项目还是Vite搭建的Vue项目，npm run dev启动的开发服务器默认自带热模块替换（HMR）能力：修改.vue单文件组件、样式、业务JS代码后，只要按下保存，开发服务会立刻同步变更内容，浏览器端自动更新对应模块的渲染效果，绝大多数场景连手动刷新页面都不用，也不会清空你当前页面的操作状态。
• Windows 10的WSL环境存在一个已知的兼容问题：如果你的项目文件放在Windows挂载分区（也就是路径带/mnt/c/这类前缀的Windows系统盘目录），可能会偶发文件监听失效、改完代码不触发更新的情况。这不是功能本身不支持，改一行配置就能解决：
  • Vite搭建的Vue3项目：在项目根目录的vite.config.js里，给server配置项加上watch: { usePolling: true }，开启文件轮询监听即可
  • Vue CLI搭建的旧版Vue项目：在项目根目录的vue.config.js里，配置devServer.watchOptions.poll = true就能修复监听失效问题
• 和Laravel框架php artisan serve的体验对比：两者都属于“一次启动服务、后续改代码无需重启”的开发模式，但Vue开发服务器的热更新体验要更顺滑。php artisan serve模式下改完PHP代码通常需要手动刷新浏览器才能看到效果，而Vue的HMR大多数场景下会自动把变更推送到浏览器，甚至能保留你已经输入的表单内容、打开的弹窗这类临时页面状态，不用重复走一遍操作流程。

小提示：如果你的WSL版本比较旧，先升级到最新稳定版，能少遇到很多文件监听、端口映射类的莫名问题。

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