Vue i18n :生产中未解释的多元化和链接消息
我成功地在我的开发环境中很好地集成了vue-i18n库，并且它运行得很好。
但是，当我在Heroku上部署项目时，使用vue-i18n 多元化或链接区域设置消息的每条消息都不会被解释，并显示整个地区消息字符串：
我已经开始讨论回购问题了，但到目前为止还没有回复.
我在Nuxt3插件中使用vue-i18n (9.2.2)，因此使用VueJS 3，用维特构建vue-i18n vite-plugin-vue-i18n的插件。
Nuxt3 configuration (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);
})和这里是两个地区文件:
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>区域设置消息中的Plurals和链接消息语法应该由vue-i18n解释，而不是显示完整的locale消息字符串。
预期的本地环境输出:
错误导致相同的代码打包用于生产，部署在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 这里上读过，但公认的答案似乎并不是最新的，并且相信webpack或vite包装这个项目的方式可能存在问题。
我在这里做错什么了？
如果没有什么问题，你会建议我在vue-i18n回购上打开一个错误报告吗？还是在@intlify/vite-plugin i18n存储库上？
回答 1
Stack Overflow用户
发布于 2022-09-26 16:18:40
我也有同样的问题。
认为这是vite-plugin i18n预编译的一个问题，它将消息转换为JS函数。我将运行时设置为false:false在vite.config.js中，然后它在生产中与HMR一样工作。
https://stackoverflow.com/questions/73648958
复制相似问题
腾讯云开发者
