uniapp中使用i18n

发布时间 2023-07-30 15:51:53作者: 环岛公路

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里)