uniapp中使用i18n

1.安装vue-i18n 

2.根目录下新建locale文件夹,创建index.js

复制代码
import { createI18n } from 'vue-i18n'

import en from './en.json'   //locale文件夹下的英文配置
import zh from './zh.json'   //中文配置
import zhFan from './zh-fan.json'  //繁体配置

const messages = {
    en,
    'zh-Hans': zh,
    'zh-Hant': zhFan
}
const i18n = createI18n({
    locale: uni.getLocale('lang') || 'zh-Hans',
    messages
})

export default i18n
复制代码

然后在main.js里导入 import i18n from '@/locale/index.js'  app.use(i18n)

3.使用

     ①在view标签里使用,如   {{ $t('index.login') }}   

     ②在属性上使用,如   :placeholder="$t('index.login')"

     ③在js代码中使用

        首先引入import i18n from '../locale/index.js' (路径根据自己项目而定)

        

复制代码
uni.showModal({
   content: i18n.global.t('index.login'),
   showCancel: false
})

let name = ref(i18n.global.t('index.login'))
let arr = reactive([
{
label: i18n.global.t('index.login'),
    value: 0
  }
])
复制代码

 

4.设置语言

简体: zh-Hans  繁体:zh-Hant 英文:en

选择好语言后通过 uni.setLocale(val) 来改变语言  如果要在某个页面获取当前语言 可使用uni.getLocale() 或者选择好语言后存入session 从session中取(uniapp是存入localStorage里)

posted @   环岛公路  阅读(1375)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
点击右上角即可分享
微信分享提示