关于RuoYi分离版Vue3启动时报错：failed to load config from vite.config.js

报错分析

这个报错是vite 在加载 vite.config.js 时执行失败了

在执行npm run dev出现报错后，继续执行npx vite --debug来查看具体报错信息

报错信息如下：

failed to load config from D:\project\virtual-procurement-platform\RuoYi-Vue-Ui\vite.config.js error when starting dev server: file:///D:/project/virtual-procurement-platform/RuoYi-Vue-Ui/vite.config.js.timestamp-1766113522600-69e75b547ef49.mjs:22 import { createSvgIconsPlugin } from "file:///D:/project/virtual-procurement-platform/RuoYi-Vue-Ui/node_modules/vite-plugin-svg-icons/dist/index.js"; ^^^^^^^^^^^^^^^^^^^^ SyntaxError: Named export 'createSvgIconsPlugin' not found. The requested module 'file:///D:/project/virtual-procurement-platform/RuoYi-Vue-Ui/node_modules/vite-plugin-svg-icons/dist/index.js' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using: import pkg from 'file:///D:/project/virtual-procurement-platform/RuoYi-Vue-Ui/node_modules/vite-plugin-svg-icons/dist/index.js'; const { createSvgIconsPlugin } = pkg; at ModuleJob._instantiate (node:internal/modules/esm/module_job:177:21) at async ModuleJob.run (node:internal/modules/esm/module_job:260:5) at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:543:26) at async loadConfigFromBundledFile (file:///D:/project/virtual-procurement-platform/RuoYi-Vue-Ui/node_modules/vite/dist/node/chunks/dep-BK3b2jBa.js:66975:15) at async loadConfigFromFile (file:///D:/project/virtual-procurement-platform/RuoYi-Vue-Ui/node_modules/vite/dist/node/chunks/dep-BK3b2jBa.js:66816:24) at async resolveConfig (file:///D:/project/virtual-procurement-platform/RuoYi-Vue-Ui/node_modules/vite/dist/node/chunks/dep-BK3b2jBa.js:66416:24) at async _createServer (file:///D:/project/virtual-procurement-platform/RuoYi-Vue-Ui/node_modules/vite/dist/node/chunks/dep-BK3b2jBa.js:63015:18) at async CAC.<anonymous> (file:///D:/project/virtual-procurement-platform/RuoYi-Vue-Ui/node_modules/vite/dist/node/cli.js:736:20)

这里的错误就很明显了：

Vite 5 使用 ESM，但当前安装的 vite-plugin-svg-icons 是 CommonJS 版本
👉 **不支持 import { createSvgIconsPlugin } from 'xxx'所以 Vite 在加载 vite.config.js 时 直接语法错误 → failed to load config

关键报错信息↓

Named export 'createSvgIconsPlugin' not found. The requested module ... is a CommonJS module

若依vite.config.js写的是

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

实际装的版本

vite-plugin-svg-icons@0.1.3

这是给 Vite 2 / 3 用的老版本（CommonJS）
Vite 5 只接受 ESM 的 named export

解决方案

1️⃣ 卸载旧版本

npm uninstall vite-plugin-svg-icons

2️⃣ 安装 Vite 5 兼容版本

npm install vite-plugin-svg-icons@2.0.1 -D      //2.x 才是 **ESM + Vite 4 / 5 官方支持

3️⃣ 确认 vite.config.js 正确写法

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
      symbolId: 'icon-[dir]-[name]'
    })
  ]
})

---

4️⃣ 清缓存（非常重要,否则可能继续报错）

rm -rf node_modules package-lock.json
npm install
npm run dev