Vue3项目中vue-i18n报[intlify] Detected HTML警告如何禁用？

问题核心 #

你遇到的[intlify] Detected HTML in ...警告不属于ESLint校验规则，是vue-i18n@9.x内置的安全提示，目的是提醒开发者翻译文本中包含HTML内容可能存在XSS风险，所以修改ESLint配置完全不会生效。

解决方案 #

方案1：全局关闭该警告

在你初始化vue-i18n实例的位置，添加warnHtmlInMessage: 'off'配置即可：

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'zh-CN', // 你的现有默认语言配置
  messages: {}, // 你的现有翻译包配置
  // 新增以下配置关闭HTML检测警告
  warnHtmlInMessage: 'off'
})

方案2：仅针对特定翻译关闭警告（更安全，推荐）

不需要全局关闭，仅在用到带HTML的翻译项时单独禁用提示：

• 如果是用t函数调用：

  // 调用时传入参数添加warnHtmlMessage: false
  const translatedText = t('your.translation.key', { warnHtmlMessage: false })
  

• 如果是用<i18n-t>组件调用：

  <i18n-t keypath="your.translation.key" :warn-html-message="false" />
  

注意：如果翻译文本确实包含需要渲染的HTML内容，记得在模板中配合v-html指令使用，同时要确保翻译内容来源可信，避免XSS风险。

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