Vue i18n 使用及相关资源整理

Vue i18n 使用

import { createI18n } from "vue-i18n";

export const messages = {
  "zh-CN": {
    message: {
      hello: "你好世界",
    },
    app: {
      "你们必晓得真理，真理必叫你们得以自由。":
        "你们必晓得真理，真理必叫你们得以自由。",
    },
  },
  "en-US": {
    message: {
      hello: "hello world",
    },
    app: {
      "你们必晓得真理，真理必叫你们得以自由。":
        "Then you will know the truth, and the truth will set you free.",
    },
  },
};

export const i18n = createI18n({
  legacy: false,
  locale: localStorage.getItem('language') || 'zh-CN',
  fallbackLocale: "en", // set fallback locale
  messages, // set locale messages
});

切换语言

<script setup lang="ts">
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

import { useSelectBCVStore, useAppStore } from "@/store";
const appStore = useAppStore();

import { useI18n } from "vue-i18n";
const { locale } = useI18n();

const languageChange = (value: string) => {
  appStore.language = value;
  locale.value = value;
  localStorage.setItem("language", value);
};
</script>

<template>
  <Select v-model="appStore.language" @update:modelValue="languageChange">
    <SelectTrigger class="w-28">
      <SelectValue />
    </SelectTrigger>
    <SelectContent side="top">
      <SelectGroup>
        <SelectItem value="zh-CN"> 简体中文 </SelectItem>
        <SelectItem value="en-US"> English </SelectItem>
      </SelectGroup>
    </SelectContent>
  </Select>
</template>