vue3+pinia+ts全局化语言配置

1、安装

npminstall vue-i18n --S

2、创建实例

在src文件夹下创建一个language文件夹，用于创建i18n实例和语言包设置

其中，modules下存储不同的语言包，这里以中英文为例

en.ts：

export default {
  homeTitle: "home",
  aboutTittle: "about"
};

zh.ts

export default {
  homeTitle: "首页",
  aboutTittle: "关于"
};

其中，index文件下为：

import { createI18n } from "node_modules/vue-i18n/dist/vue-i18n";

import zh from "./modules/zh";
import en from "./modules/en";

const i18n = createI18n({
  locale: "zh", // 设置当前语言类型
  legacy: false, // 如果要支持compositionApi，这项必须设置为false
  messages: {
    zh,
    en
  }
})
export default i18n;

3、在main文件里引入

4、在根组件里绑定和配置

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import { useI18n } from "vue-i18n";

import {onMounted} from "vue"

const i18n  = useI18n();
onMounted(() => {
  i18n.locale.value = "zh"
});
const changeZh = () => {
  i18n.locale.value = "zh"
}
const changeEn = () => {
  i18n.locale.value = "en"
}
</script>

使用：

<RouterLink to="/">{{$t("homeTitle")}}</RouterLink>
<RouterLink to="/about">{{$t("aboutTitle")}}</RouterLink>
<el-button @click="changeZh">切换中文</el-button>
<el-button @click="changeEn">切换英文</el-button>