vue-i18n@9.2.2插值开发正常，生产环境失效求助

问题现象 #

• 本地开发时，数组插值{{$t('hello_', ['World'])}}或命名插值{{$t("hello_", {name: "World"})}}能正常渲染出Hello World
• 构建部署到GitHub Pages后，页面显示原始未插值的字符串Hello {0}或Hello {name}
• 无论使用模板全局的$t函数，还是通过useI18n获取的局部t函数，问题均存在

问题原因 #

核心冲突在于@intlify/vite-plugin-vue-i18n的预编译机制与手动导入国际化JSON文件的逻辑不兼容：

• 生产环境下，插件默认会预编译locales目录下的消息文件以优化性能
• 但在main.ts中手动导入JSON并传入createI18n，会导致预编译后的消息与手动导入的消息重复加载，生产环境的插值逻辑被异常覆盖

解决方案 #

方案1：启用插件预编译，统一使用自动加载的消息 #

修改vite.config.ts中的vueI18n插件配置，开启运行时仅模式，确保预编译生效：

import { dirname, resolve } from 'node:path'
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueI18n from '@intlify/vite-plugin-vue-i18n'

export default defineConfig({
  base: process.env.NODE_ENV === 'production'
    ? '/hello-world/'
    : '/',
  plugins: [
    vue(),
    vueI18n({
      include: resolve(
        dirname(fileURLToPath(import.meta.url)),
        './assets/locales/**'
      ),
      runtimeOnly: true, // 启用运行时仅模式，依赖预编译消息
      compositionOnly: true, // 适配Vue3 Composition API
      fullInstall: false // 减少不必要的特性加载
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

修改main.ts，移除手动导入的JSON文件，改用插件自动生成的消息集合：

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import messages from '@intlify/vite-plugin-vue-i18n/messages'

import App from './App.vue'

const i18n = createI18n({
  legacy: false, // 禁用Legacy模式，启用Composition API
  allowComposition: true,
  locale: 'en_US',
  fallbackLocale: 'en_US',
  messages // 使用插件预编译的消息
})

const app = createApp(App)
app.use(i18n)
app.mount('#app')

方案2：禁用插件预编译，保留手动导入逻辑 #

如果需要继续手动管理国际化文件，修改插件配置禁用预编译：

vueI18n({
  include: resolve(
    dirname(fileURLToPath(import.meta.url)),
    './assets/locales/**'
  ),
  runtimeOnly: false // 禁用预编译，使用手动导入的消息
})

验证步骤 #

1. 执行npm run build构建生产包
2. 运行npm run preview本地预览生产包，确认插值正常显示
3. 重新部署到GitHub Pages

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