vue3 国际化 双语设置 引入 i18n

目录

需要的目录结构

需要的包

en-US.json  文件内容

 zh-CN.json 文件内容

app.ts 文件内容

index.ts 文件内容

i18n.ts 文件内容

main.ts 文件 添加

show.vue  效果展示

---

需要的目录结构

 -src

        -locales

                en-US.json

                zh-CN.json

        -store

                --modules

                        ---app.ts

                index.ts

        -views

                show.vue

        i18n.ts

        main.ts

需要的包

npm install -S pinia

npm install -S vue-i18n

npm install -S @vueuse/core

en-US.json  文件内容

{
  "login": {
    "title": "Login",
    "dataForm": {
        "name": "name",
        "password": "password",
    },
  },
"register": {
    "title": "Register",
    "dataForm": {
        "name": "name",
        "password": "password",
        "checkPassword": "checkPassword",
    },
  },
}

 zh-CN.json 文件内容

{
  "login": {
    "title": "登录",
    "dataForm": {
        "name": "用户",
        "password": "密码",
    },
  },
"register": {
    "title": "注册",
    "dataForm": {
        "name": "用户",
        "password": "密码",
        "checkPassword": "确认密码",
    },
  },
}

app.ts 文件内容

import { defineStore } from "pinia";
import { useStorage } from "@vueuse/core";
import { setLocale } from "@/i18n";

const useAppStore = defineStore("app", {
  state: () => ({
    language: useStorage("language", "zh"),
  }),
  getters: {},
  actions: {
    setLanguage(lang: string) {
      this.language = lang;
      setLocale(lang);
    },
  },
});

export default useAppStore;

index.ts 文件内容

import { createPinia } from "pinia";
import useAppStore from "./modules/app";

const pinia = createPinia();

export { useAppStore };
export default pinia;

i18n.ts 文件内容

import { createI18n, type I18n, type Locale } from "vue-i18n";
import { useStorage } from "@vueuse/core";
import EN from "./locales/en-US.json";
import ZH from "./locales/zh-CN.json";
import { WritableComputedRef } from "vue";

let i18n: I18n;

const init = () => {
  i18n = createI18n({
    legacy: false,
    locale: useStorage("language", "zh-CN").value,
    messages: {
      "en-US": {
        ...EN
      },
      "zh-CN": {
        ...ZH
      },
    },
  });
};

const setLocale = (locale: Locale): void => {
  (i18n.global.locale as WritableComputedRef<string>).value = locale;
};

const getLocal = () => {
  const lang = (i18n.global.locale as WritableComputedRef<string>).value
  return lang
}

init();

export { i18n, setLocale, getLocal };

main.ts 文件 添加

import { i18n } from "./i18n";
import pinia from "./store";

app.use(i18n);
app.use(pinia);

show.vue  效果展示

<template>
  <div>
    <el-card>
      <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
        <el-button v-if="showLang === 'zh-CN'" circle>Zh</el-button>
        <el-button v-if="showLang === 'en-US'" circle>En</el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="zh">简体中文</el-dropdown-item>
            <el-dropdown-item command="en">English</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <el-card>
            <el-row :gutter="10">
              <el-col :lg="12" :md="8" :sm="12">
                <el-form :model="input" status-icon label-width="0px" class="demo-ruleForm">
                  <el-form-item>
                    <el-label>{{ $t("login.account") }}</el-label>
                    <el-input v-model="input" type="text" autocomplete="off" />
                  </el-form-item>
                  <el-form-item>
                    <el-label>{{ $t("login.password") }}</el-label>
                    <el-input v-model="input" type="password" autocomplete="off" show-password />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="login()" class="mx-auto d-block">{{ $t("login.title")
                    }}</el-button>
                  </el-form-item>
                </el-form>

              </el-col>
            </el-row>
          </el-card>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { getLocal } from '@/i18n';
import { useAppStore } from '@/store';
import { ref } from 'vue';
const input = ref()

const appStore = useAppStore();
const showLang = ref(getLocal());
// 语言切换
const onLanguageChange = (lang: string) => {
  showLang.value = getLocal();
  if (lang === "zh") {
    showLang.value = "zh-CN";
    appStore.setLanguage("zh-CN");
  } else if (lang === "en") {
    showLang.value = "en-US";
    appStore.setLanguage("en-US");
  }
};

</script>

<style lang="scss" scoped>

</style>