迁移至WSL后Vite无法检测代码变更及路径解析异常求助

问题背景 #

基于React+Vite的应用从Windows迁移到WSL的/home/app目录后，已将导入路径中的大写文件夹Login修正为小写login（原导入import Login from './pages/Login/Login';改为import Login from './pages/login/Login';），但执行npm run dev仍报错：

[plugin:vite:import-analysis] Failed to resolve import "./pages/Login/Login" from "src/App.jsx". Does the file exist? /home/app/src/App.jsx:10:18

已尝试删除node_modules重装、清除缓存、重新克隆仓库，在PowerShell和WSL终端启动均出现相同错误，同时浏览器开发者工具Sources面板无法看到src文件夹，伴随网络错误。当前vite.config配置如下：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    allowedHosts: true,
    host: true,
    port: 5173,
    hmr: {
        overlay: false,
    },
  },
  build: {
    outDir: 'dist',
    manifest: true,
    base: '/',
  }
});

解决步骤 #

1. 排查WSL文件系统大小写与残留文件 #

• WSL原生文件系统（如/home下目录）是大小写敏感的，先检查pages目录下的实际结构：

  ls -la src/pages/
  

  确认是否存在Login和login两个重复文件夹，若有则删除大写版本：

  rm -rf src/pages/Login
  

• 全局搜索项目中所有含大写Login的文件/路径：

  find src -name "Login"
  

  将所有匹配结果统一改为小写。

2. 强制清除Vite缓存与构建残留 #

• 删除所有缓存和依赖目录：

  rm -rf node_modules .vite dist
  

• 重新安装依赖并强制清除缓存启动：

  npm install
  npm run dev -- --force
  

3. 修正Git大小写配置 #

• Windows下Git默认忽略大小写，可能导致路径变更未被提交，先在当前仓库开启大小写敏感检查：

  git config core.ignorecase false
  

• 查看未提交的大小写变更并提交：

  git status
  git add .
  git commit -m "fix: normalize path case to lowercase"
  

• 拉取远程仓库最新代码，确保远程路径已同步为小写：

  git fetch && git reset --hard origin/main # 替换main为你的分支名
  

4. 验证源码文件与全局引用 #

• 直接查看WSL中App.jsx的第10行内容，确认导入路径已修改：

  cat src/App.jsx | sed -n '10p'
  

• 全局搜索项目中残留的大写路径引用：

  grep -r "./pages/Login" src/
  

  将所有匹配的导入语句修正为小写路径。

5. 修复Vite源码映射与服务器配置 #

• 在vite.config.js中添加源码映射配置，解决Sources面板看不到src文件夹的问题：

  export default defineConfig({
    // 其他配置...
    server: {
      // 原有server配置
      sourcemap: true,
    },
    build: {
      // 原有build配置
      sourcemap: true,
    }
  });
  

• 重启dev服务器后，刷新浏览器查看Sources面板是否正常显示src目录。

6. 确认WSL目录类型 #

• 确保项目位于WSL原生文件系统（/home/app）而非挂载的Windows目录（如/mnt/c/...），执行以下命令验证：

  pwd
  

  若路径包含/mnt，则将项目移动到WSL原生目录再测试。

内容的提问来源于stack exchange，提问作者Nicolás Bonder