首页 > 其他分享 >Vue3 如何接入 i18n 实现国际化多语言

Vue3 如何接入 i18n 实现国际化多语言

时间：2024-07-08 22:10:20浏览次数：10  
标签：vue const 语言 接入 home Vue3 i18n import

1. 基本方法

在 Vue.js 3 中实现网页的国际化多语言，最常用的包是 vue-i18n，通常我们会与 vue-i18n-routing 一起使用。

vue-i18n 负责根据当前页面的语言渲染文本占位符，例如：

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

当语言设置为中文时，会将 Login 渲染为“登录”。

vue-i18n-routing 负责将页面语言与 URL 绑定，例如：

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

表示访问中文版的 /repo 路径。

将不同语言的网页放在不同的 URL 下有助于 SEO，因为可以在 <head> 部分添加语言信息，增加不同语言被搜索引擎索引的概率。

Google 对于多语言 Vue 站点的爬取机制如下：

  1. 类似 Vue 站点的 JS 动态页面是可以被爬取的，不影响权重 (参见 Google SEO)。
  2. 与用户首选语言匹配的页面将优先展示 (参见 Google SEO)。

2. 基础实现

第一步，安装一个 Vite 下使用 <i18n> 标签的插件：unplugin-vue-i18n。

然后调整 vite.config.js：

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)),
    },
  },
});

添加插件后，我们可以在组件内使用 <i18n> 块：

<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>

这里我们定义了两种不同的语言。

3. 路径绑定

接下来，我们需要定义使用 URL 作为当前语言，编辑 router/index.ts：

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;
}

我们定义了支持的语言种类，并将原来的 routes 包装起来，vue-i18n-routing 会自动生成所有支持语言的 routes：

  • /home = 中文
  • /en/home = 英文

由于我们设置了 defaultLocale: 'zh-CN'，默认路径为中文。

然后，我们需要将源代码中涉及跳转的部分，例如：

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

全部加上 localePath，表示是当前语言的 URL 路径下：

import { useLocalePath } from 'vue-i18n-routing';

const localePath = useLocalePath();

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

这样就完成了路径绑定。

4. 自动切换

有时，我们希望没有默认语言，而是根据用户的浏览器语言自动选择：

  • /zh-CN/home = 中文
  • /en/home = 英文
  • /home -> 重定向 (浏览器偏好中文) -> /zh-CN/home = 中文
  • /home -> 重定向 (浏览器偏好英文) -> /en/home = 英文

这时我们需要定义一个 store，这里使用 Pinia store，Vuex 同理。

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;
      }
    },
  }
});

这段代码使用了 VueUse 中的 usePreferredLanguages 来获得用户偏好的浏览器语言，并用 useStorage 添加了一个 LocalStorage 中的存储项。

逻辑是：如果用户手动设定了语言（savedLang），则使用之；如果没有，则使用系统偏好的第一个语言。这样，我们只要取 lang 的值就可以得到最终的偏好语言是中文还是英文。

然后，我们需要定义一个路径守卫，以自动处理 URL 中没有语言的情况。

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;
}

这里需要注意三点：

  1. 我们增加了一个新的空 locales，这样请求才能到达 router.beforeEach。
  2. 我们去掉了 defaultLocale。
  3. 使用刚才定义的 store：useLangStore() 这行代码必须放在 router.beforeEach 中，而不能放在模块顶端，因为加载模块时 Pinia 还没有启动。

这样，就实现了无语言路径自动跳转到当前偏好语言路径。

5. 导航栏切换按钮

然后，可以在导航栏增加一个按钮，来手动切换语言，例如：

<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>

这里，我们在刚才定义的 store 中存储当前手动设定的语言，同时使用 switchLocalePath 来实现路径和语言的切换。

6. SEO 和 Head Meta

同一内容的不同语言版本应该在 head 中进行标注，并指向所有其他替代页面（参见 Google SEO）。这里我们可以在 App.vue 中用 useLocaleHead 和来自 @unhead/vue 包的 useHead 进行设置：

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 || [])]),
  });
});

这样就基本实现了一个多语言的国际化站点。可能在进行前端翻译的同时，后端也需要进行翻译，请期待下一期：Python Flask 后端如何接入 i18n 实现国际化多语言！

6. 案例分析

案例：GithubStar.Pro 的前端界面国际化多语言，是使用本文所述的方法实现的，各位可以看看效果。

也欢迎各位使用 GithubStar.Pro 互赞平台，提高您的开源项目知名度，收获更多用户。

标签：vue,const,语言,接入,home,Vue3,i18n,import
From： https://www.cnblogs.com/techhub/p/18290763/vue3-i18n

相关文章

  • 2024已过半，还没试过在vue3中使用ioc容器吗？
    Vue3已经非常强大和灵活了，为什么还要引入IOC容器呢？IOC容器离不开Class，那么我们就从Class谈起Class的应用场景一提起Class，大家一定会想到这是Vue官方不再推荐的代码范式。其实，更确切的说，Vue官方是不推荐基于Class来定义Vue组件。如图所示：社区确实有几款基于Clas......
  • vue3 watch使用方式，如何监听reactive子属性 ref数据等
    代码<template><divclass="box">childB</div></template><scriptlang="ts"setup>import{reactive,watch,ref}from"vue";constdata1=reactive({msg:"childB",abc:"sl......
  • vue3 defineEmits 使用
    概论defineEmits用来定义子组件暴漏给父组件的自定义事件测试代码子组件<template><divclass="box">child</div></template><scriptlang="ts"setup>interfaceEmit{(e:"emitfn1",data:Array<number>):void;......
  • vk-data-goods-sku-popup uniapp vue3示例
    效果图组件简介vk-data-goods-sku-popup是一个uniapp上面方便好用的sku组件，使用场景包括但不限于商品详情页、购物车页面、订单结算页、搜索结果页下面就上代码了，完整vue页面的代码如下<scriptsetup>import{ref,defineEmits,defineProps,computed}from'vue'//显示......
  • 前端面试题28（Vue3的Teleport功能在什么场景下特别有用？能给个例子吗？）
    Vue3的Teleport功能在需要将组件的渲染结果放置在DOM树中与当前组件位置无关的任意位置时特别有用。这通常涉及到需要将某些UI元素（如模态框、弹出菜单、通知、工具提示等）从其逻辑上的父级组件中“提取”出来，放置到页面的更高层级或完全不同的位置，以避免样式冲突或层......
  • 前端面试题27（在实际项目中，如何有效地利用Vue3的响应式系统提高性能？）
    在实际项目中，有效利用Vue3的响应式系统提高性能主要涉及以下几个关键点：1.合理使用reactive和refreactive：用于将复杂的数据结构（如对象或数组）转换成响应式版本。确保只将需要实时更新的数据结构声明为响应式，避免不必要的全局响应化，以减少性能开销。ref：用于创建基本类型......
  • 保姆级阿里云接入http接口加密数据教程，一看就会！大厂经验分享，接口数据落表
    前言：有关接口数据的接入，源端会给予我们一份接口说明文件，接着我们需依据对方提供的接口文档进行代码编写，以实现数据落表。接入步骤大致可分为以下几步：1.依据对方提供的接口文档，明确接口地址、请求方式、传参信息以及参数格式等。2.借助编写代码，获取接口数据内容。3.按照......
  • tauri + vue3 如何实现在一个页面上局部加载外部网页？
    ......
  • Vue3中drawer组件无法重新回显数据
    不做drawer的时候数据是可以正常回显的，点击详情id是正常传值的，但是使用了drawer组件以后发现只会调用一次详情功能，以后不管点击哪条信息都不会刷新信息永远都是第一条的信息，但是id刷新成功了，后来发现是没有加v-if来判断drawer的打开值，如果您有一样的问题可以参考以下代码......
  • 从 0 实现一个 vue3 的权限指令 v-permission
    在开发过程中会经常遇到一些权限控制，比如路由的权限控制、按钮的权限控制......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99