vue-i18n@9.2.2 参数插值适用于开发，不适用于生产

Question

我正在 github 页面（vite、vue3、typescript）上开发一个小项目，并且在使用 vue-i18n 进行插值时遇到问题。我一直试图在其他地方找到同样的问题，但我一直无法找到这样的例子。我想知道最近是否有一些我误解的变化。这是我遇到的问题：作为示例，我希望使用 i18n 显示此消息。

\n

Hello World\n

\n

所以在我的语言环境 json 文件中我有

\n

{ "hello_": "Hello {0}" }\n

\n

在我的模板中我有

\n

<p>{{$t(\'hello_\', [\'World\'])}}</p>\n

\n

当我在本地工作时，我得到

\n

Hello World\n

\n

正如预期的那样。但是，当我构建应用程序并部署 dist 时，我得到了

\n

Hello {0}\n

\n

我的原始代码将键路径和插值参数作为 props 传递给另一个组件。我尝试直接指定它（如上面的示例所示），还尝试了命名插值"hello_":"Hello {name}"，{{$t("hello_", {name: "World"})}}它在开发中也运行良好，但在生产中却不起作用。我尝试过使用 $t 并直接通过导入

\n

    import { useI18n } from \'vue-i18n\' \n     const\xc2\xa0{\xc2\xa0t\xc2\xa0}\xc2\xa0=\xc2\xa0useI18n({\xc2\xa0useScope:\xc2\xa0\'global\'\xc2\xa0})\n

\n

这是我的packages.json

\n

Hello World\n

\n

这是我的 vite.config.ts

\n

    import { dirname, resolve } from \'node:path\'\n    import { fileURLToPath, URL } from \'node:url\'\n    \n    import { defineConfig } from \'vite\'\n    import vue from \'@vitejs/plugin-vue\'\n    import vueI18n from \'@intlify/vite-plugin-vue-i18n\'\n    \n    // https://vitejs.dev/config/\n    export default defineConfig({\n      base: process.env.NODE_ENV === \'production\'\n        ? \'/hello-world/\' // prod\n        : \'/\', // dev\n      plugins: [\n        vue(),\n        vueI18n({\n          include: resolve(\n            dirname(fileURLToPath(import.meta.url)),\n            \'./assets/locales/**\'),\n        })\n      ],\n      resolve: {\n        alias: {\n          \'@\': fileURLToPath(new URL(\'./src\', import.meta.url))\n        }\n      }\n    })\n\n

\n

我的 main.ts 是

\n

    import { createApp } from \'vue\'\n    import { createI18n } from \'vue-i18n\'\n    \n    import App from \'./App.vue\'\n    import en_US from \'./assets/locales/en_US.json\'\n    import vn_VN from \'./assets/locales/vn_VN.json\'\n    import es_MX from \'./assets/locales/es_MX.json\'\n    import de_DE from \'./assets/locales/de_DE.json\'\n    \n    const i18n = createI18n({\n        allowComposition: true,\n        locale: \'en_US\',\n        fallbackLocale: \'en_US\',\n        messages: { \n            en_US, \n            vn_VN, \n            es_MX, \n            de_DE \n        }\n    })\n    \n    const app = createApp(App)\n    \n    app.use(i18n)\n    \n    app.mount(\'#app\')\n\n

\n

Answer 1

最终解决我的问题的是 vue-i18n-next 的 github 页面中提出的上一个问题

https://github.com/intlify/vue-i18n-next/issues/1059

只需添加runtimeOnly: false到 vite.config.ts 中的 vueI18n 插件配置即可解决我的问题。