uniapp中使用多语言

npm install vue-i18n@9.1.9

main.js中引入

import Vue from 'vue';
import VueI18n from 'vue-i18n';
 
Vue.use(VueI18n);
 
// 创建 VueI18n 实例并配置 locale 和 messages
const i18n = new VueI18n({
  locale: 'en', // 设置默认语言
  messages: {
    en: {
      message: {
        hello: 'hello world'
      }
    },
    fr: {
      message: {
        hello: 'Bonjour le monde'
      }
    }
  }
});
 
// 创建 Vue 应用实例并传入 i18n 实例
new Vue({
  i18n,
  // ...
}).$mount('#app');

页面代码

<template>
  <p>{{ $t("message.hello") }}</p>
</template>

切换语言

<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;  
      // 如果需要，还可以将当前语言保存到本地存储中  
      uni.setStorageSync('lang', language);  
    }  
  }  
}  
</script>