vue前端国际化（i18n）

环境

vue3
ts
vite

安装vue-i18n

pnpm i vue-i18n --save

创建lang文件夹

en.ts

export default {
    say:{
        hello:'hello'
    }
}

zh.ts

export default {
    say:{
        hello:'你好'
    }
}

index.ts

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

const msg = {
  en,
  zh,
};

const i18n = createI18n({
  locale: "en",
  messages: msg,
  legacy:false
});

export default i18n;

main.ts

import i18n from './lang/index'
createApp(App).use(i18n).mount('#app')

使用

全局注册i18n后会抛出$()函数以及v-t指令，这两个可以直接在template里面直接使用

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
const { locale, t } = useI18n()
const lang = ref<Boolean>(true)
const scriptLang = ref<string>(t('say.hello'))
const changeLang = () => {
  // true 为英文 false为中文
  lang.value = !lang.value

}
const comlang = ref('en')
watch(lang, (v) => {
  if (v) {
    comlang.value = 'en'
    locale.value = 'en'
  } else {
    comlang.value = 'zh'
    locale.value = 'zh'
  }
}, {
  immediate: true
})
</script>

<template>
  <button @click="changeLang">切换语言{{lang?'en':'zh'}}</button>
  <div>template里：{{$t('say.hello')}}</div>
  <div>script的变量里:{{scriptLang}}</div>
</template>

<style scoped>

</style>

注意

• 在script里面使用国际化的话，需要先引入useI18n，然后解构出t函数
• 切换语音只要改变locale的值就可以了，（locale也从useI18n解构出）
• script里面使用t函数会导致页面不会同步更新，可以使用计算属性或者监听解决
• 页面刷新会初始化国际化，建议将locale的值保存到本地缓存里，使用本地缓存的值来决定使用那个语言包