国际化
介绍
国际化使用vue-i18n插件实现,相关文件位于目录src\i18n下，使用了json格式，方便在vs-code 中使用插件i18n Ally进行直接编辑和翻译
使用方式
可能vs-code中需要配置：.vscode\settings.json
"i18n-ally.localesPaths": [
"src/i18n/lang"
],
"i18n-ally.keystyle": "nested",
"i18n-ally.sortKeys": true,
"i18n-ally.sourceLanguage": "zh-CN",
"i18n-ally.displayLanguage": "zh-CN",
"i18n-ally.enabledFrameworks": [
"vue",
"react"
],
"i18n-ally.extract.keyMaxLength": 100,
"i18n-ally.editor.preferEditor": true,
"i18n-ally.enabledParsers": [
"json"
],
"i18n-ally.extract.autoDetect": false,
"i18n-ally.translate.engines": [
"deepl"
],
"i18n-ally.translate.saveAsCandidates": true
在组件中国际化
import { useI18n } from 'vue-i18n'
import type { MessageSchema } from '@/i18n'
const { t } = useI18n<{ message: MessageSchema }>({ useScope: 'global' })
在模板文件中使用,具有提示作用
在ts,js文件中使用
如果是 hook 函数中使用,也可使用上面的方式，本质上其实是一样的，单独的ts文件函数，不是在组件中直接调用的,会报错i18n 只能在顶层 setup中使用,需要换为下面的方式
import { useSetupI18n } from '@/i18n'
const { i18n } = useSetupI18n()
const { t } = i18n.global
这种方式,在切换语言时,可能会失去响应性，可能需要新增一个方法来重新运行一次，改变翻译显示
如在程序中的 动态改变浏览器标题功能
动态标题的函数如下
export const useDynamicTitle = () => {
const appStore = useAppStore()
const { i18n } = useSetupI18n()
const { t } = i18n.global
const setDynamicTitle = () => {
if (appStore.app.dynamicTitle) {
const title = appStore.app.titleI18n
? t(`route.${appStore.app.titleI18n}`)
: appStore.app.title
window.document.title = title + '-' + t('APP')
} else {
window.document.title = t('APP')
}
}
return {
setDynamicTitle,
}
}
语言切换时,浏览器标题并不会实时更改语言,只能在监控到语言改变时，执行设置浏览器标题函数，如下
watch(
() => appStore.app.lang,
() => {
useDynamicTitle().setDynamicTitle()
}
)
动态路由的国际化
