vue3使用i18n 实现国际化

发布时间:2023年12月25日

目录

一、需求

二、实现原理

三、实现步骤

1.安装依赖?vue-i18n

2.配置语言包

3.如何使用

模板中使用

ts动态t函数使用

4.如何切换语言


一、需求

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

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

二、实现原理

实现原理就是定义了一个对象,然后在这个对象中包含两种(当然也可以是多种)语言,比如在这里这个messages对象中就包含两个对象分别文enzh,这两个对象中都有同一个属性msgzh中对应的是中文,而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

文章来源:https://blog.csdn.net/chaoPerson/article/details/135197883
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。