UniApp实现多语言国际化与本地化的设计与开发方法

export default {
  welcome: '欢迎使用UniApp',
  home: '首页',
  about: '关于我们',
  contact: '联系我们'
}

export default {
  welcome: 'Welcome to UniApp',
  home: 'Home',
  about: 'About Us',
  contact: 'Contact Us'
}

<template>
  <div>
    <span @click="switchLanguage('zh-CN')">中文简体</span>
    <span @click="switchLanguage('en-US')">English</span>
  </div>
</template>

<script>
export default {
  methods: {
    switchLanguage(language) {
      this.$i18n.locale = language
    }
  }
}
</script>

<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
    <p>{{ $t('home') }}</p>
    <p>{{ $t('about') }}</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/10513">
                            <img src="https://img.php.cn/upload/webcode/000/000/010/176249700397976.jpg" alt="网奇英文商城外贸系统">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/10513">网奇英文商城外贸系统</a>
                            <p>网奇Eshop是一个带有国际化语言支持的系统，可以同时在一个页面上显示全球任何一种语言而没有任何障碍、任何乱码。在本系统中您可以发现，后台可以用任意一种语言对前台进行管理、录入而没有阻碍。而任何一个国家的浏览者也可以用他们的本国语言在你的网站上下订单、留言。用户可以通过后台随意设定软件语言，也就是说你可以用本软件开设简体中文、繁体中文与英文或者其他语言的网上商店。网奇Eshop系统全部版本都使用模</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="网奇英文商城外贸系统">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/10513" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="网奇英文商城外贸系统">
                        </a>
                    </div>
                
    <p>{{ $t('contact') }}</p>
  </div>
</template>

<script>
export default {
  created() {
    // 页面加载时动态设置语言
    this.$i18n.locale = 'zh-CN'
  }
}
</script>