Vue 3 + ESLint 警告 [intlify] 检测到 HTML

Question

在控制台内收到警告“[intlify] Detected HTML in .....”，但无法弄清楚如何禁用此特定行的此警告。我还尝试更改 eslintrc.js 文件以禁用所有 v-html 警告，但没有成功。

依赖关系

    "vue": "^3.0.0",
    "vue-i18n": "^9.2.0-beta.15",

开发依赖

    "@vue/cli-plugin-babel": "^4.5.14",
    "@vue/cli-plugin-eslint": "^4.5.14",
    "@vue/cli-service": "^4.5.14",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-standard": "^6.1.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.32.0",
    "eslint-config-standard": "^16.0.3",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.3.1",
    "eslint-plugin-vue": "^7.19.1",

Eslint 配置文件

  extends: [
    'standard',
    'eslint:recommended',
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint',
    impliedStrict: true
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-new': 'off',
    'no-var': 'off',
    indent: ['error', 2],
    semi: 0
  },

Answer 1

2022 年更新：

对于 Vue-I18n 版本 9+，根据使用的模式有两种不同的设置：

• 组合 API 模式的设置：

  warnHtmlMessage: false
  

• 旧 API 模式的设置：

  warnHtmlInMessage: "off"
  

引自Vue-I18n V9 发行说明

在 Vue I18n v8.x 中， warnHtmlInMessage 的值为“off”。因此，默认情况下，即使消息包含 HTML，也不会向控制台输出任何警告。

在 Vue I18n v9 或更高版本中，更改默认值如下：

• 旧版 API 模式： warnHtmlInMessage 属性：“warn”
• Composition API模式：warnHtmlMessage boolean属性，默认true

Answer 2

这个来自warnHtmlInMessage vue i18n，你需要改变的是创建它时它的选项。

也许你在某处会有一个createI18n或VueI18n方法。在那里你可以禁用它，如下所示：

createI18n({
    warnHtmlInMessage: 'off' // disable of the Detected HTML in message
});

Answer 3

对于 vue i18N v9.x 或更高版本，您可以在演示代码中使用“warnHtmlMessage”选项。

const i18n = setupI18n({
  globalInjection: true,
  legacy: false,
  warnHtmlMessage: false, // disable warning HTML in message
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    en
  }
})