vue3 国际化

一、安装

        安装 vue-i18n 依赖（我的版本是9.2.2）

npm i vue-i18n

二、配置

        在src文件夹下建立lang文件夹，里面分别建立文件index.ts、en.ts（英文）、zh.ts（中文）

1、index.ts

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

const messages = {
  en,
  zh,
};

const language = (navigator.language || "en").toLocaleLowerCase();
const i18n = createI18n({
  legacy: false,   // 9.2以上版本不输入该属性会报错
  locale: sessionStorage.getItem('LANG') || language.indexOf('zh') > -1 ? 'zh':"en",
  fallbackLocale: "en",
  messages,
});

export default i18n;

2、zh.ts

export default {
    cc: '超'
}

3、en.ts

export default {
    cc: 'C'
}

三、引入

        main.ts文件引入lang中的index.ts文件

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import i18n from './lang'

createApp(App)
.use(store)
.use(router)
.use(i18n)
.mount('#app')

四、使用

1、直接当做普通文本使用

<template>
  <div>
    <div>{{$t('cc')}}</div>
  </div>
</template>

2、通过setup使用

       ref常用于设置单个，reactive常用于设置多个（但切换语言时不会响应，见后面标题4）

<template>
  <div>
    <div v-text="text1"></div>
    <div v-text="text2.a"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

const text1 = ref(t('cc'));
const text2 = reactive({
    a:t('cc')
})
</script>

3、切换语言

<template>
  <div>
    <button @click="changeLang('zh')">中文</button>
    <button @click="changeLang('en')">英文</button>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n';
const { locale } = useI18n();
const changeLang = (lang:string):void => {
  locale.value = lang;
  // 防止页面刷新后语言类型重置
  sessionStorage.setItem('LANG', lang==='zh' ? 'zh' : 'en');
}
</script>

4、切换语言时 ref/reactive 不响应问题

解决方案1：computed

<template>
  <div>
    <div v-text="text1"></div>
    <button @click="changeLang('zh')">中文</button>
    <button @click="changeLang('en')">英文</button>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
const text = ref(t('cc'));
const text1 = computed(() => text.value = t('cc'));
const changeLang = (lang:string):void => {
  locale.value = lang;
  // 防止页面刷新后语言类型重置
  sessionStorage.setItem('LANG', lang==='zh' ? 'zh' : 'en');
}
</script>

解决方案2：watch（适用于文本有变化的情况）

<template>
  <div>
    <div v-text="text"></div>
    <div v-text="text1"></div>
    <button @click="changeLang('zh')">中文</button>
    <button @click="changeLang('en')">英文</button>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch} from 'vue';
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
const text = ref(t('cc'));
const text1 = computed(() => text.value = t('cc'));
const changeLang = (lang:string):void => {
  locale.value = lang;
  // 防止页面刷新后语言类型重置
  sessionStorage.setItem('LANG', lang==='zh' ? 'zh' : 'en');
}
watch(text,() => {
  text.value = t('cc')
})
</script>