Vue i18n：复数化和链接消息未在生产中解释

Question

I've managed to integrate nicely the vue-i18n library on my development environment and it works perfectly.

However, when I deploy the project on Heroku, every message using vue-i18n Pluralization or Linked Locale Messages is not being interpreted and shows the entire locale message string:

I've opened a discussion on the repo but no reply so far...

I am using vue-i18n (9.2.2) in a Nuxt3 plugin, therefore using VueJS 3 , building with Vite with the plugin for vue-i18n vite-plugin-vue-i18n .

Nuxt3 configuration (nuxt.config.ts) , showing the Vite plugin config to resolve the locales JSON files:

import { defineNuxtConfig } from 'nuxt'
import { resolve, dirname } from 'node:path'
import { fileURLToPath } from 'url'
import VueI18nVitePlugin from '@intlify/unplugin-vue-i18n/vite'

export default defineNuxtConfig({
  ...
  vite: {
    plugins: [
      VueI18nVitePlugin({
        include: [
          resolve(dirname(fileURLToPath(import.meta.url)), './locales/*.json')
        ]
      })
    ]
  },
 ...
});

Nuxt plugin for vue-i18n (plugins/vue-i18n.ts):

import { createI18n } from 'vue-i18n'
import fr from '~/locales/fr.json'
import en from '~/locales/en.json'

// DOC I18N : https://www.i18next.com/translation-function/essentials
export default defineNuxtPlugin(({ vueApp }) => {
  const i18n = createI18n({
    legacy: false,
    allowComposition: true,
    globalInjection: true,
    locale: 'fr',
    fallbackLocale: 'en',
    messages: { 
      'en': en, 
      'fr': fr, 
    }
  });
  vueApp.use(i18n);
})

And here are the 2 locales files:

locales/fr.json:

{
  "test": "Zero test | Un test | {n} tests",
  "testnested": {
    "nestedvalue": "Zero sous-test | Un sous-test | {n} sous-tests"
  },
  ...

locales/en.json:

  "test": "Zero test | One test | {n} tests",
  "testnested": {
    "nestedvalue": "Zero sub-test | Un sub-test | {n} sub-tests"
  },
  ...
}

Example of how the locale messages are used within the Vue templates:

    <p>
      -- TEST ROOT --<br />
      {{ $t('test', 0) }}<br />
      {{ $t('test', 1) }}<br />
      {{ $t('test', 2) }}<br />
      <br />
      -- TEST NESTED --<br />
      {{ $t('testnested.nestedvalue', 0) }}<br />
      {{ $t('testnested.nestedvalue', 1) }}<br />
      {{ $t('testnested.nestedvalue', 2) }}<br />
    </p>

The Plurals and Linked messages syntax in the locales messages should be interpreted by vue-i18n and not display the full locale message string.

[EXPECTED] Local environment output:

[BUG RESULT] Same code packaged for production, deployed on Heroku:

Another example with failing Linked Messages (in production):

Here are some infos about my system:

  System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
    Memory: 16.35 GB / 31.59 GB
  Binaries:
    Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), 
    Chromium (105.0.1343.27)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    @intlify/unplugin-vue-i18n: ^0.5.0 => 0.5.0
    vitest: ^0.20.3 => 0.20.3
    vue-i18n: ^9.2.2 => 9.2.2
    vue-toastification: next => 2.0.0-rc.5

I have read on other threads and on StackOverflow here but the accepted answer doesn't seem to be up-to-date, and believe there could be issues with the way webpack or vite are packaging the project.

What am I doing wrong here?

If nothing seems wrong, would you recommend I open a bug report on vue-i18n repo? Or on the @intlify/vite-plugin-vue-i18n repository?

Answer 1

I had the same problem.

Think this is an issue with the vite-plugin-vue-i18n pre-compile which converts messages to JS functions. I set runtimeOnly:false in vite.config.js and it then worked the same in Production as in HMR.