美文网首页
uniapp国际化vue2篇

uniapp国际化vue2篇

作者: Allen6879 | 来源:发表于2024-03-22 13:17 被阅读0次

    国际化语言包配置

    1.根目录创建locale文件夹,结构如下

    image.png

    2.index.js代码

    import en from './en.json'
    import zhHans from './zh-Hans.json'
    import zhHant from './zh-Hant.json'
    
    export default {
         en,
        'zh-Hans': zhHans,
        'zh-Hant': zhHant
    }
    
    

    3.语言包代码如下


    image.png

    3.main.js引入国际化


    image.png
    image.png
    image.png

    使用语言包

    1.在标签里面使用如下

    <text class="style">{{ $t('my.lang') }}</text>
    

    2.在js使用

    this.$t('key')
    

    3.在pages.json使用

    image.png

    4.在外部js使用

    import messages from "@/locale/index.js"
    let locale =  uni.getLocale() //获取当前语言
    const lang = messages[locale]
     accounts.message =  lang['key'];
    

    5.在NVUE 使用,computed 结合外部js使用

    import messages from "@/locale/index.js"
      computed: {
        lang(){
            let lang =  uni.getLocale() //获取当前语言
            return  messages[lang]
        }
      }
    
      <text class="text">{{ lang['key'] }}</text>
    

    相关文章

      网友评论

          本文标题:uniapp国际化vue2篇

          本文链接:https://www.haomeiwen.com/subject/gpxqtjtx.html