Vue3项目vue.config.js中yaml-loader与i18n共存报错求助

算力阿峰

2026-9-3

问题原因

两个webpack loader规则的匹配范围出现重叠：全局配置的yaml规则未做范围限制，会错误匹配到Vue单文件组件中携带blockType=i18n查询参数的i18n自定义块。yaml-loader会先于i18n loader拿到未被正确提取的块内容做YAML解析，由于拿到的内容不是纯YAML文本，直接触发解析报错。
对照测试结果已经能佐证这个逻辑：移除yaml全局规则时，i18n loader可以正常接管i18n块完成解析；移除i18n块时，yaml loader只处理独立yaml文件不会出错，本质就是匹配范围冲突导致loader执行顺序、处理对象不符合预期。

解决方法

任选一种方案配置即可：

方案1：给yaml全局规则增加排除项
调整yaml规则配置，显式排除所有i18n块资源，避免yaml-loader处理这类虚拟资源：

config.module
  .rule('yaml')
    .test(/\.ya?ml?$/)
    // 排除Vue SFC中的i18n块资源
    .exclude.add(/blockType=i18n/).end()
    .use('yaml-loader')
      .loader('yaml-loader')
      .end();

方案2：在i18n规则内完成YAML解析，提高执行优先级
给i18n规则设置更高的执行优先级，直接在该规则链上挂载yaml-loader处理YAML格式的i18n内容，不让全局yaml规则介入SFC内部块的处理：

config.module
  .rule('i18n')
    .type('javascript/auto')
    .resourceQuery(/blockType=i18n/)
    // 标记为前置loader，优先于普通规则执行
    .enforce('pre')
    .use('i18n')
      .loader('@intlify/vue-i18n-loader')
      .end()
    .use('yaml-loader')
      .loader('yaml-loader')
      .end();