vue3使用i18n 实现国际化

目录

一、需求

二、实现原理

三、实现步骤

1.安装依赖 vue-i18n

2.配置语言包

3.如何使用

模板中使用

ts动态t函数使用

4.如何切换语言

---

我的博客原文：https://code-nav.top/article/1069

一、需求

博主最近重构了自己的单页面SSR博客，打算添加国际化功能，众所周知，实现国际化已是一个很常见的功能。用户可以根据自己的喜好，设置页面的自己合适的语言，从而实现国际化浏览。这样用户体验度会大大提升。先看效果：

博客用的Vite4.2构建，框架是Vue3.2，采用服务端渲染，国际化用的vue-i18n，下面我给大家详细介绍。 

二、实现原理

实现原理就是定义了一个对象，然后在这个对象中包含两种（当然也可以是多种）语言，比如在这里这个messages对象中就包含两个对象分别文en和zh，这两个对象中都有同一个属性msg，zh中对应的是中文，而en对应的就是英文。

我们在初始的时候定义一个locale变量，并且指定变量值为"en"，同时我们还定义了一个函数，这个函数接收一个key值，我们可以理解为这个key是想要获取国际化处理的变量值，比如在这个例子里面这个key就代表着 "msg",这样我们只需要修改locale的值就可以获取不同语言下的msg的值了，这就实现了国际化。

三、实现步骤

1.安装依赖 vue-i18n

 npm install vue-i18n@next

2.配置语言包

首先在src文件下面创建一个language文件夹专门用来处理国际化的问题，然后在里面新建index.ts文件,用于i18函数的创建，配置相关的语言包等等，并且建立一个文件夹名称为lang，专门用来存放自定义的语言包。目录结构如下图：

lang文件夹存放你需要国际化的语言包嗯，字典比如如下配置，根据自己需求配置

en.ts

export default {
  language: '中文',
  header: {
    welcome: 'Welcome to the responsive  spa ssr  website！',
    skin: 'Skin',
    lifePerception:
      'An original front-end technology blog dedicated to sharing primary source on the way to front-end learning. Focus on Web front-end development, mobile development, front-end engineering, front-end career development, do the most valuable front-end technology learning site.',
    blogger: 'Front End · Yang',
    blogTips: 'Focus on the latest front-end technology!'
  }
};

zh_CN.ts

export default {
  language: 'English',
  header: {
    welcome: '欢迎访问响应式SPA SSR网站！',
    skin: '换肤',
    lifePerception:
      '原创前端技术博客，致力于分享前端学习路上的第一手资料。专注 web 前端开发、移动端开发、前端工程化、前端职业发展，做最有价值的前端技术学习网站。',
    blogger: '前端·小阳仔',
    blogTips: '关注互联网和前端开发技术的博客网站！'
  }
};

index.ts进行i18函数的创建和导出，代码如下：

import { createI18n } from 'vue-i18n'; // 引入vue-i18n组件
import zh_CN from './lang/zh_CN';
import en from './lang/en';
const lang = 'zh_CN';

const i18n = createI18n({
  locale: lang, // 默认显示语音
  messages: {
    zh_CN, // 中文

    en // 英文——美式
  }
});

export default i18n;

我们导出之后还需要在main.ts中进行注册使用，如下：

import App from "./App.vue";
import VueI18n from '../language';
const app = createApp(App);
app.use(VueI18n);

3.如何使用

模板中使用

 <p>{{ $t(`header.welcome`) }}</p>

header.welcome对应的是语言包中的key属性，每一个key对应一个中英文数据。

ts动态t函数使用

比如有些参数是动态传参的，也需要国际化的处理，这时候我们就用到了t函数。

<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { useI18n } from "vue-i18n"; //要在js中使用国际
export default defineComponent({
  name: 'Header',
  setup() {
    const { t } = useI18n();
    const headerData = reactive({
      navbarData: [
        {
          name: t("navbar.home"),
          path: '/',
          active: true,
          blog: true,
          class: 'home-style'
        },
      ]
    });
  }
});
</script>

4.如何切换语言

为了切换语言我封装了一个语言组件

<template>
  <span class="language-text cur-pointer m-r-10" @click="setLang()">{{ $t(`language`) }}</span>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance } from 'vue';
export default defineComponent({
  name: 'Langage',
  setup() {
    const { proxy } = getCurrentInstance() as any;
    let lang = 'zh_CN';
    const setLang = () => {
      if (lang === 'zh_CN') {
        proxy.$i18n.locale = 'en';
      } else {
        proxy.$i18n.locale = 'zh_CN';
      }
      lang = proxy.$i18n.locale;
      localStorage.setItem('lang', lang);
    };

    return {
      setLang
    };
  }
});
</script>

我们定义了setLang这个函数用来切换语言，在函数内部用proxy.$i18n.locale来更新当前的语言，更新完成后把当前语言属性存在了本地localStorage，当然也可以存在store中，也可以每次服务端存储当前语言喜好，每次登录拉取最新喜好配置。

如果你到了这一步，那代表你已经语言切换功能完美实现啦！恭喜恭喜！

用户体验度又上升啦！YYDS！

欢迎在评论区交流。

如果文章对你有所帮助，❤️关注+点赞❤️鼓励一下！博主会持续更新。。。。

主题切换功能在线体验链接：https://code-nav.top

往期回顾

  vue3中使用prismjs或者highlight.js实现代码高亮

 vue中粘贴板clipboard的使用方法

图片懒加载vue3-lazy

Vite4.2 +Vue3.2+Less实现主题切换功能

vue3.x使用prerender-spa-plugin预渲染达到SEO优化