Vite中如何用import.meta.glob读取YAML文件及报错解决

报错原因 #

直接用import.meta.glob读取YAML文件时，Vite默认不会识别YAML格式，会将其当作JavaScript文件解析，从而触发语法错误。

解决步骤 #

1. 安装YAML解析插件
   安装vite-plugin-yaml插件（或@rollup/plugin-yaml），执行命令：

   npm install vite-plugin-yaml --save-dev
   # 或使用yarn
   yarn add vite-plugin-yaml -D
   

2. 配置Vite插件
   在项目根目录的vite.config.js（或.ts）中导入并启用插件：

   import { defineConfig } from 'vite'
   import yaml from 'vite-plugin-yaml'
   // 若为Vue/React等框架项目，保留原有框架插件
   import vue from '@vitejs/plugin-vue'
   
   export default defineConfig({
     plugins: [vue(), yaml()]
   })
   

   如需自定义YAML解析规则（比如指定安全schema），可传入配置参数：

   yaml({ schema: 'DEFAULT_SAFE_SCHEMA' })
   

3. 验证读取功能
   重新运行项目后，执行import.meta.glob("../../locales/*.yaml", { eager: true })即可正常读取并解析YAML文件，返回结果为解析后的JSON对象。

额外检查 #

确认你的YAML文件语法正确，比如报错提到的en.yaml第11行附近是否存在格式问题（比如未正确包裹的字符串、无效缩进等），YAML语法错误也会导致解析失败。

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