Node 16升级至20后Vite/Vue3中import.meta.glob路径解析异常

问题根源 #

Node 20对URL路径的解析逻辑与Node 16存在差异，结合Vite的路径别名配置时，会触发Windows盘符路径与相对路径混合解析的问题——尤其是用fileURLToPath处理ES模块URL生成别名时，容易产生格式冲突。

解决方案 #

1. 修正Vite路径别名配置 #

把原有的fileURLToPath方式替换为path.resolve（需引入Node的path模块），规避URL解析带来的Windows路径格式问题：

// vite.config.ts
import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

2. 调整import.meta.glob的路径写法 #

修正别名配置后，可继续使用别名路径；也可改用项目根目录相对路径：

// 使用别名（配置修正后即可正常运行）
const all = import.meta.glob('@/components/*.vue')

// 或改用项目根目录相对路径
const all = import.meta.glob('./src/components/*.vue')

3. 升级Vite至兼容版本 #

Node 20需要搭配Vite 4.3.0及以上版本，旧版Vite对Node 20的路径解析支持不完善，执行以下命令升级：

npm install vite@latest --save-dev

4. 排查Windows路径格式 #

若问题仍存在，需确保别名路径为标准Windows格式（无多余斜杠），避免出现/c:/xxx这类混合格式——path.resolve会自动生成符合系统规范的路径。

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