Vite集成Antd Pro Layout时出现ENOENT文件不存在报错如何解决

算力阿峰

2026-10-28

问题根因

从报错路径/Users/tranthaison/DEV/vite2-react-ts/srcantd/es/style/themes/default.less可以直接定位，这是路径解析逻辑冲突导致的文件找不到：

原有别名配置用正则匹配所有~开头的请求，统一替换为项目src目录的绝对路径，既没有区分项目内部资源和node_modules下的第三方包资源，也没有在替换后的路径后补充分隔符，导致本该指向node_modules的antd样式请求被错误拼接为src目录绝对路径 + antd/xxx的路径，最终出现缺路径分隔符的srcantd拼接错误，和报错信息完全吻合。
项目使用的@vitejs/plugin-react-refresh已官方废弃，和当前Vite版本、新版antd的样式解析逻辑存在兼容问题，会进一步放大路径解析的错误。
原有的按需加载样式路径匹配的是旧版antd的lib目录结构，和当前安装的antd默认es目录结构不匹配，也会加剧路径匹配偏差。

完整修复步骤

第一步：替换废弃的React插件
将已停止维护的@vitejs/plugin-react-refresh替换为官方当前版本的@vitejs/plugin-react：
1. 卸载旧插件：npm uninstall @vitejs/plugin-react-refresh
2. 安装新插件：npm install @vitejs/plugin-react -D
3. 替换代码里的导入和插件调用：
```
// 原导入语句
// import reactRefresh from '@vitejs/plugin-react-refresh';
// 替换为
import react from '@vitejs/plugin-react'

// 原插件调用
// plugins: [reactRefresh(), ...]
// 替换为
plugins: [react(), ...]
```

第二步：修正路径别名规则
调整resolve.alias的匹配逻辑，拆分为项目内部路径映射和node_modules资源适配两部分，避免拦截第三方包的样式请求：

resolve: {
  alias: [
    // 适配less引用里的~路径写法，不再强制替换为src目录
    { find: /^~/, replacement: '' },
    // 自定义项目内部路径映射，比如@指向src
    { find: '@', replacement: path.resolve(__dirname, 'src') },
  ]
}

第三步：修正antd按需加载的样式路径
调整vite-plugin-imp里的样式路径配置，匹配当前antd版本的目录结构：

vitePluginImp({
  libList: [
    {
      libName: 'antd',
      // 原路径是旧版的lib目录，匹配antd默认的es目录结构
      style: (name) => `antd/es/${name}/style/index.less`,
    },
  ],
})

第四步：保留并校验less主题配置
原有的less主题定制配置不需要额外修改，只需要确保javascriptEnabled: true开启，保证less可以正常解析js语法：

css: {
  preprocessorOptions: {
    less: {
      javascriptEnabled: true,
      modifyVars: {
        'primary-color': '#1DA57A',
        'link-color': '#1DA57A',
        'border-radius-base': '2px',
      },
    },
  },
}

第五步：调整依赖预编译配置
把antd相关模块加入预编译列表，避免首次加载时的路径解析错误：
```
optimizeDeps: {
  include: ['@ant-design/icons', 'antd/es'],
}
```
收尾操作：删除项目下的node_modules/.vite缓存目录，再重启开发服务，避免旧的路径缓存残留导致报错。

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