Vite创建的React应用出现TypeError [ERR_INVALID_URL_SCHEME]错误求助

错误信息 #

TypeError [ERR_INVALID_URL_SCHEME]: The URL must be of scheme file
at fileURLToPath (node:internal/url:1489:11)

问题原因 #

你使用的vite-aliases插件与Vite 5的ESM模块模式存在兼容性问题，导致路径解析时触发URL协议错误；同时手动配置的jsconfig.json路径别名与插件生成的别名可能存在冲突。

解决方案 #

1. 替换插件为Vite内置别名配置 #

修改vite.config.js，移除vite-aliases插件，改用Vite原生的resolve.alias配置，确保与jsconfig.json中的路径对应：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
      "@assets": resolve(__dirname, "./src/assets"),
      "@components": resolve(__dirname, "./src/components"),
      "@utils": resolve(__dirname, "./src/utils"),
      "@AddProject": resolve(__dirname, "./src/components/AddProject"),
    },
  },
});

2. 卸载vite-aliases插件 #

执行命令移除该插件：

npm uninstall vite-aliases

3. 保留jsconfig.json配置不变 #

该文件用于编辑器路径提示，与Vite的别名配置保持一致即可，无需修改。

4. 重启开发服务 #

停止当前Vite服务，重新执行npm run dev启动，验证错误是否消失。

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