vue.js - vue3:i18n 插件在 json 文件中找不到本地化
问题描述
我正在尝试使用 i18n 本地化设置 vue3 应用程序。本地化应该位于 json 文件中。我将 i18n via 添加vue add i18n
到我的项目中。安装过程中提出的问题均以默认值回答,但具有旧版支持的问题除外(我的回答:否)。当我尝试使用 json 文件中的文本时,它会在控制台中告诉我[intlify] Not found 'message' key in 'en' locale messages.
本地翻译工作得很好。而且我不知道为什么它不适用于 JSON 文件中提供的翻译。
这是我的代码:
包.json
{
"name": "optinity-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/locales/**/*.json\""
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-brands-svg-icons": "^5.15.3",
"@fortawesome/free-regular-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/vue-fontawesome": "^3.0.0-4",
"@kyvg/vue3-notification": "^2.3.1",
"@microsoft/signalr": "^5.0.6",
"axios": "^0.21.1",
"babel-plugin-transform-decorators": "^6.24.1",
"bulma": "^0.9.2",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-class-component": "^8.0.0-0",
"vue-i18n": "^9.1.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0",
"vuex-module-decorators": "^1.0.1"
},
"devDependencies": {
"@intlify/vue-i18n-loader": "^2.1.0",
"@types/jest": "^24.0.19",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-unit-jest": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"@vue/test-utils": "^2.0.0-0",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"typescript": "~4.1.5",
"vue-cli-plugin-i18n": "~2.1.1",
"vue-jest": "^5.0.0-0"
}
}
i18n.ts
import { createI18n, LocaleMessages, VueMessageType } from 'vue-i18n'
/**
* Load locale messages
*
* The loaded `JSON` locale messages is pre-compiled by `@intlify/vue-i18n-loader`, which is integrated into `vue-cli-plugin-i18n`.
* See: https://github.com/intlify/vue-i18n-loader#rocket-i18n-resource-pre-compilation
*/
function loadLocaleMessages(): LocaleMessages<VueMessageType> {
const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
const messages: LocaleMessages<VueMessageType> = {}
locales.keys().forEach(key => {
const matched = key.match(/([A-Za-z0-9-_]+)\./i)
if (matched && matched.length > 1) {
const locale = matched[1]
messages[locale] = locales(key)
}
})
return messages
}
export default createI18n({
legacy: false,
locale: process.env.VUE_APP_I18N_LOCALE || 'en',
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
messages: loadLocaleMessages()
})
main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import i18n from './i18n'
const app = createApp(App).use(i18n).use(store).use(router)
app.mount('#app');
vue.config.js
module.exports = {
// ... your other options
transpileDependencies: [
'vuex-module-decorators'
],
pluginOptions: {
i18n: {
locale: 'en',
fallbackLocale: 'en',
localeDir: 'locales',
enableLegacy: false,
runtimeOnly: false,
compositionOnly: false,
fullInstall: true
}
}
}
en.json
{
"message": "hello i18n !!"
}
最后
你好I18n.vue
<template>
<p>{{ t('message') }}</p>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useI18n } from 'vue-i18n'
export default defineComponent({
name: 'HelloI18n',
setup() {
const { t } = useI18n({
inheritLocale: true,
useScope: 'global'
})
// Something todo ..
return { t }
}
})
</script>
<i18n>
{
"en": {
"hello": "Hello i18n in SFC!"
}
}
</i18n>
如果我将我的范围切换HelloI18n.vue
到本地,我可以使用<i18n>
标签中提供的转换。我已经在我的 i18n.ts 文件中添加了一个控制台日志,以检查是否找到了该文件,就是这种情况。
我不知道为什么这不起作用。有没有人有任何想法或可以指出我正确的方向?
解决方案
主要问题是 i18n.ts 中执行 loadLocalMessages 的函数没有从 locales 文件夹中正确获取文件。
function loadLocaleMessages (): LocaleMessages<VueMessageType> {
const locales = require.context(
'./locales',
true,
/[A-Za-z0-9-_,\s]+\.json$/i
)
const messages: LocaleMessages<VueMessageType> = {}
locales.keys().forEach(key => {
const matched = key.match(/([A-Za-z0-9-_]+)\./i)
if (matched && matched.length > 1) {
const locale = matched[1]
messages[locale] = locales(key).default
}
})
return messages
}
我添加了 locales(key).default ,您可以获得从文件中获取的值。
推荐阅读
- php - 在 Laravel 中通过查询选择计算属性
- .net - 调试时使用 MiniDumpWriteDump() Win32 API 时出现异常
- pandas - python numpy矢量化对象实例数组
- reactjs - 如何从 React 发送 CORS 请求?
- forms - Vuejs v-model 自动转义 html 实体
- javascript - 箭头不从字段中的位置移动
- ios - ARKit 添加了 X 翻转的 2D 视频
- android - Android Studio 3.2.1 一直卡死
- javascript - Chrome 扩展程序:计划通知未重置 chrome 存储上的数据
- android - Firebase 实时数据库的行为不一致