Vue3 接入 i18n 实现国际化多语言案例分析

<span>{{ t('Login') }}</span>

https://githubstar.pro/zh-CN/repo

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import VueDevTools from 'vite-plugin-vue-devtools';
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
export default defineConfig({
  plugins: [
    vue(),
    VueDevTools(),
    VueI18nPlugin({}),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});

<script setup lang="ts">
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n({ inheritLocale: true, useScope: 'local' });
</script>
<template>
  <span>{{ t('Login') }}</span>
</template>
<i18n lang="yaml">
en:
  Login: 'Login to web'
zh-CN:
  Login: '登录'
</i18n>

import { createRouter as _createRouter, type RouteLocationNormalized } from 'vue-i18n-routing';
import { createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue';
const locales = [
  {
    code: 'en',
    iso: 'en-US',
    name: 'English',
  },
  {
    code: 'zh-CN',
    iso: 'zh-CN',
    name: '中文',
  },
];
export function createRouter(i18n: any) {
  const router = _createRouter(i18n, {
    version: 4,
    locales: locales,
    defaultLocale: 'zh-CN',
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
      {
        path: '/home',
        name: 'home',
        component: HomeView,
      },
    ],
  });
  return router;
}

router.push({ name: 'home' });

import { useLocalePath } from 'vue-i18n-routing';
const localePath = useLocalePath();
router.push(localePath({ name: 'home' }));

import { usePreferredLanguages, useStorage } from '@vueuse/core';
import { defineStore } from 'pinia';
export const useLangStore = defineStore('lang', {
  state: () => {
    const savedLang = useStorage<string | null>('lang', null, undefined);
    const systemLang = usePreferredLanguages();
    return { savedLang, systemLang };
  },
  getters: {
    lang: (state) => {
      const lang = state.savedLang || state.systemLang[0];
      if (lang.startsWith('zh')) {
        return 'zh-CN';
      } else {
        return 'en';
      }
    },
  },
  actions: {
    setLang(l?: string) {
      if (!l) {
        this.savedLang = null;
      } else {
        this.savedLang = l;
      }
    },
  }
});

import { createRouter as _createRouter, type RouteLocationNormalized } from 'vue-i18n-routing';
import { createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue';
const locales = [
  {
    code: 'en',
    iso: 'en-US',
    name: 'English',
  },
  {
    code: 'zh-CN',
    iso: 'zh-CN',
    name: '中文',
  },
  {
    code: '',
    iso: '',
    name: '',
  }
];
export function createRouter(i18n: any) {
  const router = _createRouter(i18n, {
    version: 4,
    locales: locales,
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
      {
        path: '/home',
        name: 'home',
        component: HomeView,
      },
    ],
  });
  router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized) => {
    const lang = useLangStore();
    const pathLocale = to.path.split('/')[1];
    if ((!pathLocale) || (!locales.some(locale => locale.code === pathLocale))) {
      return `/${lang.lang}${to.path}`;
    }
  });
  return router;
}

<script setup lang="ts">
import { useLocalePath, useSwitchLocalePath } from 'vue-i18n-routing';
import { useLangStore } from '@/stores/lang';
const lang = useLangStore();
const { t, locale } = useI18n({ inheritLocale: true, useScope: 'local' });
</script>
<template>
<div
  @click="
    lang.setLang('en');
    router.push(switchLocalePath('en'));
    menuShown = '';
  "
  class="py-2 px-2 gap-2 flex items-center cursor-pointer hover:bg-slate-400/10"
  :class="{ 'text-sky-300': locale == 'en' }"
  role="option"
  tabindex="-1"
  :aria-selected="locale == 'en'"
>
  <IconEnglish class="w-5 h-5 text-slate-400 dark:text-slate-200" />
  English
</div>
<div
  @click="
    lang.setLang('zh-CN');
    router.push(switchLocalePath('zh-CN'));
    menuShown = '';
  "
  class="py-2 px-2 gap-2 flex items-center cursor-pointer hover:bg-slate-400/10"
  :class="{ 'text-sky-300': locale == 'zh-CN' }"
  role="option"
  tabindex="-1"
  :aria-selected="locale == 'zh-CN'"
>
  <IconChinese class="w-5 h-5 text-slate-400 dark:text-slate-200" />
  中文
</div>
</template>

import { useLocaleHead } from 'vue-i18n-routing';
import { useHead } from '@unhead/vue';
const i18nHead = useLocaleHead({ addSeoAttributes: true, defaultLocale: null, strategy: null });
onMounted(() => {
  useHead({
    htmlAttrs: computed(() => ({
      lang: i18nHead.value.htmlAttrs!.lang,
    })),
    link: computed(() => [...(i18nHead.value.link || [])]),
    meta: computed(() => [...(i18nHead.value.meta || [])]),
  });
});