如何在Vite中使用vue-i18n翻译HTML？解决HTML检测报错问题

你当前的问题是把sanitizeHtml配置错了位置——它被放在了Rollup的输出配置里，这和unplugin-vue-i18n插件的检测规则无关。要解决HTML检测报错，需要修改VueI18nPlugin的配置：

• 移除build.rollupOptions.output中的sanitizeHtml: false，这个配置对当前问题无效
• 在VueI18nPlugin的配置对象中添加rules: { html: false }，关闭插件对消息中HTML的检测规则

修改后的vite.config.js代码如下：

// Plugins
import vue from '@vitejs/plugin-vue'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'

// Utilities
import { resolve, dirname } from 'node:path'
import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'node:url'

// https://vitejs.dev/config/
export default defineConfig({
  optimizeDeps: {
    include: ['@intlify/vite-plugin-vue-i18n']
  },
  build: {
    rollupOptions: {
      output: {
        // 移除无效的sanitizeHtml配置
      },
    },
  },
  plugins: [
    vue({
      template: { transformAssetUrls }
    }),
    VueI18nPlugin({
      include: resolve(dirname(fileURLToPath(import.meta.url)), './src/i18n/locales/**'),
      // 添加这行，关闭HTML检测规则
      rules: { html: false }
    }),
    vuetify({
      autoImport: true,
      styles: {
        configFile: 'src/styles/settings.scss',
      },
    }),
  ],
  define: { 'process.env': {} },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
    extensions: [
      '.js',
      '.json',
      '.jsx',
      '.mjs',
      '.ts',
      '.tsx',
      '.vue',
    ],
  },
  server: {
    port: 3000,
  },
})

另外，如果你在创建vue-i18n实例时，也需要确保开启HTML支持，比如在src/i18n/index.js（或对应文件）中设置：

import { createI18n } from 'vue-i18n'
import messages from '@intlify/unplugin-vue-i18n/messages'

const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages,
  // 允许HTML在消息中渲染
  sanitizeHtml: false
})

export default i18n

这样就能同时解决插件检测报错和前端渲染HTML的问题。

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