1***@qq.com
1***@qq.com
  • 发布:2024-07-09 09:26
  • 更新:2024-07-31 14:47
  • 阅读:260

vue3项目中使用i18n国际化字符串占位符不生效

分类:ASK社区

如题,在上述情况下H5正常,小程序和app都无法显示,为了验证问题,我使用HBuilderX分别创建了Vue2和Vue3版本的Hello i18n 示例项目, 然后讲一个字符串添加占位符并在组件中使用,发现在vue2的版本中app和小程序能够正常显示,但是在vue3的版本中就无法显示,示例项目就是使用官方的模板创建的,没有什么其他的修改。下图是随便修改的一个测试用的字符串和引用的代码
zh-Hans.json:
{
"locale.auto": "系统",
"locale.en": "English",
"locale.zh-hans": "简体中文",
"locale.zh-hant": "繁体中文",
"locale.ja": "日语",
"index.title": "Hello i18n",
"index.home": "主页",
"index.component": "组件",
"index.api": "API",
"index.schema": "Schema",
"index.demo": "uni-app 国际化演示",
"index.demo-description": "包含 uni-framework、manifest.json、pages.json、tabbar、页面、组件、API、Schema",
"index.detail": "详情",
"index.language": "语言{count}",
"index.language-info": "语言信息",
"index.system-language": "系统语言",
"index.application-language": "应用语言",
"index.language-change-confirm": "应用此设置将重启App",
"api.message": "提示",
"schema.name": "姓名",
"schema.add": "新增",
"schema.add-success": "新增成功"
}

index.vue:

<template>
<view class="container">
<view class="title">{{$t('index.demo')}}</view>
<view class="description">{{$t('index.demo-description')}}</view>
<view class="detail-link">{{$t('index.detail')}}: <text
class="link">https://uniapp.dcloud.net.cn/collocation/i18n</text></view>
<view class="locale-setting">{{$t('index.language-info')}}</view>
<view class="list-item">
<text class="k">{{$t('index.system-language')}}:</text>
<text class="v">{{systemLocale}}</text>
</view>
<view class="list-item">
<text class="k">{{$t('index.application-language')}}:</text>
<text class="v">{{applicationLocale}}</text>
</view>
<view class="locale-setting">{{$t('index.language', {count: '哈哈'})}}</view>
<view class="locale-list">
<view class="locale-item" v-for="(item, index) in locales" :key="index" @click="onLocaleChange(item)">
<text class="text">{{item.text}}</text>
<text class="icon-check" v-if="item.code == applicationLocale"></text>
</view>
</view>
</view>
</template>

...

2024-07-09 09:26 负责人:无 分享
已邀请:
沐子鱼

沐子鱼 - 你好

写方法字符串替换 我是这样解决的
{{ translateTxt($t(update.newInVersionUpdate), { v: versionUpdate }) }}

utils方法 或者 mixins混入
// 处理翻译结果
const translateTxt = (txt, obj) => {
for (let i in obj) {
txt = txt.replace({${i}}, obj[i])
}
return txt;
}

c***@qq.com

c***@qq.com

我跟你碰上了同样的问题,它在H5端运行正常,但是APP端无法替换

1***@qq.com

1***@qq.com

怎么解决的?

要回复问题请先登录注册