如何在Vite中使用vue-i18n来翻译html?

Question

我使用Vite与Vue 3和Vue -i18n。该站点有html格式的页面，需要在适当的语言环境中显示。当加载区域设置文件时，我得到[plugin:unplugin-vue-i18n] Detected HTML in '...' message.，其中…是一个包含html标记的消息-即使我设置了sanitizeHtml: false。

我的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: false,
},
},
},
plugins: [
vue({
template: { transformAssetUrls }
}),
// https://lokalise.com/blog/vue-i18n/#Installing_and_configuring_the_Vue_I18n_plugin
VueI18nPlugin({
include: resolve(dirname(fileURLToPath(import.meta.url)), './src/i18n/locales/**'), // provide a path to the folder where you'll store translation data (see below)
}),
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
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,
},
})

Answer 1

添加vite.config.js后问题解决了

plugins: [
VueI18nPlugin({
...
strictMessage: false
}),
...
]

"strictMessage"选项在0.10.0版本(2023年3月22日)的unplugin-vue-i18n插件(unplugin-vue-i18n changelog)中添加