生产环境下监听vue-i18n的locale无响应问题求助

问题场景 #

以下代码在本地开发环境能正常打印locale变更日志，但生产/预发布构建环境中，控制台无日志输出，locale值也未发生变化，不过UI界面的语言却能正常更新。

组件代码：

<template>
  <div>
    <h1>I18n Demo Component</h1>
    <p>Current locale: {{ locale }}</p>
  </div>
</template>

<script setup lang="ts">
import { watch } from 'vue'
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()

watch(locale, (newLocale) => {
  console.log('Locale changed to', newLocale)
})
</script>

vue-i18n配置：

const i18n = createI18n({
  legacy: false,
  locale: navigator.language.split('-')[0] || 'en',
  fallbackLocale: 'en',
  messages: {},
  availableLocales: ['nl', 'en', 'de'],
  inheriteLocale: true,
})

尝试过的写法（生产环境仍不触发）：

watch([locale, () => locale.value], ([newLocale, newLocaleValue]) => {
  console.log('locale change: ', newLocale, newLocaleValue)
}, { deep: true })

当前环境：Vue 3.4.37，vue-i18n 10.0.4，需要通过监听locale变化重新获取对应语言的数据。

补充Vite配置：

export default defineConfig(({ mode }) => {
  // Use environment variable for commit hash, fallback to "unknown"
  const commitHash = process.env.COMMIT_HASH || "unknown"

  return {
    plugins: [
      vue(),
      yamlPlugin(),
      svgLoader({ defaultImport: `component` }),
    ],
    define: {
      'import.meta.env.VITE_COMMIT_HASH': JSON.stringify(commitHash),
    },
    server: {
      hmr: {
        host: `localhost`,
        port: 4000,
      },
    },
    optimizeDeps: {
      exclude: [`primevue`],
    },
    resolve: {
      extensions: [`.mjs`, `.esm.js`, `.js`, `.mts`, `.ts`, `.jsx`, `.tsx`, `.vue`, `.json`],
      alias: [
        {
          find: `@`,
          replacement: fileURLToPath(new URL(`./src`, import.meta.url)),
        },
        ...getPrimevueAliases(),
      ],
    },
  }
})

解决方案 #

1. 监听locale.value的getter函数（推荐） #

在vue-i18n@10+的组合式API模式下，直接监听locale对象在生产构建时可能因优化失效，改为监听其value的 getter 函数，确保响应式追踪生效：

import { watch } from 'vue'
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()

watch(() => locale.value, (newLocale) => {
  console.log('Locale changed to', newLocale)
  // 执行重新获取对应语言数据的逻辑
})

2. 直接监听全局i18n实例的locale属性 #

如果组件内监听仍不生效，可直接引入全局i18n实例进行监听：

import { watch } from 'vue'
import i18n from '@/path/to/your/i18n/config' // 替换为你的i18n配置文件路径

watch(() => i18n.global.locale.value, (newLocale) => {
  console.log('Locale changed to', newLocale)
})

3. 调整Vite生产构建的压缩配置 #

生产环境下，压缩工具（如terser）可能会移除无实际业务逻辑的console.log，或因tree-shaking优化掉监听代码。如果需要保留日志，可在Vite配置中禁用console移除：

export default defineConfig(({ mode }) => {
  // ... 其他原有配置
  return {
    // ...
    build: {
      minify: 'terser',
      terserOptions: {
        compress: {
          drop_console: false, // 禁止移除console语句
        },
      },
    },
  }
})

4. 确认语言切换的正确方式 #

确保你是通过响应式的方式修改locale：

// 正确的切换方式
const { locale } = useI18n()
locale.value = 'de' // 或 i18n.global.locale.value = 'de'

避免直接修改非响应式属性，导致监听无法触发。

内容的提问来源于stack exchange，提问作者Jarosław Rewers