Vue3 多语言i18n切换

项目中涉及国际相关业务的时候，都需要进行多语言处理，以下是我在做uniapp项目中实现简单的i18n处理中英文版本需求，以及业务代码的整理记录，希望对你有所帮助。

Vue2 多语言切换功能移步这里哦~

1、安装

yarn add vue-i18n@9

2、语言配置文件

src目录下新建 language文件夹

在language文件夹下新建index.ts、zh.ts、en.ts

zh.ts

export default {
  entry: {
    lanText: '切换语言',
    pageTitle:'客户管理',
    activity:'市场活动',
    approve:'活动审批',
  }
}

en.ts

export default {
  entry: {
    lanText: 'Switch language',//切换语言
    pageTitle:'Customer Management',//客户管理
    activity:'Marketing Activity',//市场活动
    approve:'Activity Approval',//活动审批
  },
}

index.ts

import { createI18n } from 'vue-i18n'
import zh from "./zh";
import en from "./en";

let language = uni.getStorageSync('lang') || 'en'; //  获取本地存储 || 根据浏览器语言设置


const i18n = createI18n({
  legacy: false, // 使用Composition API，这里必须设置为false
  locale: language, // 默认显示语言
  globalInjection: true, // 全局注册$t方法
  messages: {
    "zh": zh,
    "en": en,
  },
});

export default i18n;

main.ts

import App from './App.vue';
import i18n from '@/language/'
export function createApp() {
  const app = createSSRApp(App)
  app.use(i18n);
  return {
    app
  };
}

页面中使用

<script setup lang="ts">
import { useI18n } from "vue-i18n";  // 引用组件
const { t, locale } = useI18n();  // 解构调用函数
//设置语言模式
function changeLang(){
    if(locale.value == 'en'){
     locale.value = 'zh'
     uni.setStorageSync('lang','en')
    }else{
     locale.value = 'en'
     uni.setStorageSync('lang','en')
    }
     init();
}
</script>

<template>
  <view class="content">
    <view class="btn-area">
        <button size="mini" type="primary" plain="true" @click="changeLang">
            {{ $t('entry.lanText') }}
        </button>
    </view>
  </view>
</template>

以上就是所有代码了，当然使用的时候语法有区别，需要注意，整理如下

js：

name:t('entry.businessAnalysis'),//经营分析

template：

<button size="mini" type="primary" plain="true" @click="changeLang">
{{ $t('entry.lanText') }}
</button>

属性绑定：

<input style="width: 300px;" class="form-control" :placeholder="t('loginPage.phoneText')">

结语：以上就是所有代码和注意事项啦，看到这里了，希望对你有所帮助噢~后面还会整理Vue2版本多语言的处理

Vue2多语言切换功能参考