Vite 报错“Source map points to missing source files”如何解决？

该类sourcemap指向缺失文件的警告均来自Vite的依赖预构建机制，触发的常见原因有三个：

• Vite预构建缓存目录node_modules/.vite损坏：上次项目启动中途中断、依赖安装不完整、Node版本变动都会导致预构建的缓存文件和对应sourcemap不匹配
• 依赖版本兼容问题：你当前使用的Vite 2.6.x与配套的@vitejs/plugin-react 1.0.0存在已知的sourcemap生成逻辑bug，预构建第三方依赖时会出现路径解析错误
• 配置异常：若你手动开启了全局sourcemap但未配置依赖源文件的读取权限，也会触发该警告

按优先级依次尝试以下操作即可：

1. 清除Vite预构建缓存后重启项目
   手动删除项目根目录下的node_modules/.vite文件夹，或者执行对应系统的删除命令：

   • Mac/Linux：rm -rf node_modules/.vite
   • Windows CMD：rd /s /q node_modules\.vite
     删除完成后重新执行npm run dev启动项目即可，90%以上的同类型问题可通过该操作解决

2. 升级Vite与配套React插件到稳定兼容版本
   如果你清理缓存后仍有报错，可将2.x分支的Vite和插件升级到最终稳定版，修复版本兼容bug：

   npm install -D vite@^2.9.15 @vitejs/plugin-react@^1.3.2
   

3. 调整Vite配置关闭预构建sourcemap（可选）
   如果你不需要调试第三方依赖的源码，可直接在vite.config.js中添加配置，关闭预构建依赖的sourcemap生成，从根源屏蔽该类警告：

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   
   export default defineConfig({
     plugins: [react()],
     optimizeDeps: {
       esbuildOptions: {
         sourcemap: false
       }
     }
   })
   

额外提示：你当前package.json中直接写的proxy字段对Vite无效，Vite的代理配置需要放到vite.config.js的server.proxy属性中，避免后续出现代理不生效的问题。

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