vue.js - Vue i18n : Pluralization and Linked Messages not interpreted in production

Question

我已经成功地很好地集成了 vue-i18n我的开发环境中的库并且运行良好。

但是，当我在 Heroku 上部署项目时，每条消息都使用 vue-i18n Pluralization或Linked Locale Messages不被解释并显示整个区域设置消息字符串:

我已经就该存储库展开了讨论，但到目前为止还没有回复...

我正在 Nuxt3 中使用 vue-i18n (9.2.2)插件，因此使用 VueJS 3 ，用 Vite 构建使用 vue-i18n 插件 vite-plugin-vue-i18n .

Nuxt3 配置 (nuxt.config.ts)，显示用于解析语言环境 JSON 文件的 Vite 插件配置:

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')
        ]
      })
    ]
  },
 ...
});

vue-i18n 的 Nuxt 插件 (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);
})

这是 2 个语言环境文件:

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"
  },
  ...
}

如何在 Vue 模板中使用区域设置消息的示例:

    <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>

语言环境消息中的复数和链接消息语法应由 vue-i18n 解释，并且不显示完整的语言环境消息字符串。

[预期]本地环境输出:

[BUG 结果] 为生产打包相同的代码，部署在 Heroku 上:

链接消息失败的另一个示例(生产中):

以下是有关我的系统的一些信息:

  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

我已阅读其他线程和 StackOverflow here但接受的答案似乎不是最新的，并且相信 webpack 或 vite 打包项目的方式可能存在问题。

我在这里做错了什么？

如果没有任何问题，您会建议我在 vue-i18n 存储库上打开错误报告吗？或者在 @intlify/vite-plugin-vue-i18n 存储库上？

Answer 1

我也遇到了同样的问题。

认为这是将消息转换为 JS 函数的 vite-plugin-vue-i18n 预编译的问题。我在 vite.config.js 中设置了 runtimeOnly:false，然后它在 Production 中的工作方式与 HMR 中的工作方式相同。