vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3项目国际化

在vue3项目中实现国际化的代码示例

作者:前端随想

国际化就是指在一个项目中,项目中的语言可以进行切换(中英文切换),那么在实际项目中是如何实现的呢,本文就给大家详细的介绍实现方法,需要的朋友可以参考下

首先我们进行一下最终效果的展示:

了解国际化的实现思路⚽️⚽️

首先在正式的实现国际化之前,我们不妨先来了解一下实现国际化的思路:

//定义msg值的数据源
const messages={
   en:{
   msg:"hello world"
 }
  zh:{
   msg:"你好世界"
 }
}
//定义切换变量
let locale="en";
//3.定义赋值函数
function t(key){
    return messages[locale][key]
}

讲解一些国际化的实现方式,其实就是定义了一个对象,然后在这个对象中包含两种(当然也可以是多种)语言,比如在这里这个messages对象中就包含两个对象分别文enzh,这两个对象中都有同一个属性msgzh中对应的是中文,而en对应的就是英文,

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

在项目开发中使用国际化⛹️‍♀️⛹️‍♀️

初始化配置

在了解了国际化的原理之后,其实实现国际化的原理并不复杂,那么我们在实际项目中是如何做的呢?

在开发过程中,一般我们需要借助第三方的包来实现。

首先安装指定的包

npm i vue-i18n@next

对于国际化我们实现分为一下几个步骤:

在安装指定的包之后我在实际项目中是这样处理的:

import { createI18n } from "vue-i18n";
//这是我自己创建的语言包
import mZhLocale from "./lang/zh";
import mEnLocale from "./lang/en";
//这里使用了vuex来进行全局的数据共享
import store from "@/store";
//创建messages对象,里面注册相应的语言包,这里面我注册了自己定义的语言包
const messages = {
  en: {
    ...mEnLocale,
  },
  zh: {
    ...mZhLocale,
  },
};
// 进行持久化处理,防止在页面刷新之后数据丢失
const getLanguage = () => {
  return store && store.getters && store.getters.language;
};
const i18n = createI18n({
  legacy: false, // 使用composition API
  locale: getLanguage(),//初始的时候调用这个函数获取vuex中的数据,当然vuex初始数据调用localstorage中存储的数据,或者默认赋值为”zh“
  globalInjection: true,  // 表明使用全局t函数
  messages,
});
export default i18n;//将i18函数导出

我们在index.js中进行i18函数的创建和导出,注册使用了自己定义的语言包,我们导出之后还需要在main.js中进行注册使用

main.js中

import App from "./App.vue";
import i18n from "@/i18n/index";
const app = createApp(App);
app.use(i18n);

在进行注册完之后我们还要在项目中对要展示的文字的部分进行如下的修改,因此我们要使用$t函数

在项目中使用

其中的navBar.home则是在语言包中定义的数据 例如在英语语言包中:

export default{
 navBar:{
   home:"Home"
 }
}

在中文语言包中就会有一个对应的中文数据

export default{
 navBar:{
   home:"主页"
 }
}

这里只是做一个实例。

<span>{{ $t("navBar.home") }}</span>

t函数的第一种使用方式,我们当然还会遇到其他的情况。

就比如说是在登录注册页面中的输入框我们也想要使用t函数来进行国际化的处理:

 <el-input :placeholder="$t('login.inputName')"></el-input>

没有发生太大的变化,只是要注意一下,当然我们有的时候可能需要封装一个函数,然后在函数中我们封装了国际化的相关需求,这个时候如何做呢?

其实也不复杂,比如我们封装了一个函数用来处理sideBarItem中的标题。

import i18n from "@/i18n";
// 根据这个函数来处理面包屑和sidebar
export const generateTitle = (title) => {
  return i18n.global.t("route." + title);
};

这里面我们导入了之前创建的I18n文件夹下面的idnex.js文件,注意最后我们在函数返回值上面通过i18n.global.t()来将相应的值返回。

element-plus组件中的国际化处理🍆🍆

在上面的说明中我们只是配置了自定义的语言包处理,那么我们如何处理element-plus中的组件的国际化处理呢?

在element-plus的给出的方案中,我们一般这么处理:

<template>
  <el-config-provider :locale="$store.getters.language === 'zh' ? ZhCn : En">
    <router-view></router-view>
  </el-config-provider>
</template>
<script setup>
import En from "element-plus/lib/locale/lang/en";
import ZhCn from "element-plus/lib/locale/lang/zh-cn";
</script>

这样当我们vuex中的数据发生变化的时候,element-plus中的语言也会发生相应的变化。

封装语言切换组件

当然为了切换语言我封装了一个组件LangSelect:

<template>
  <div>
    <el-dropdown trigger="click" @command="handleSetLanguage">
      <div>
        <el-tooltip content="国际化">
          <div><svg-icon icon="language"></svg-icon></div>
        </el-tooltip>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="zh" :disabled="language === 'zh'"
            >中文</el-dropdown-item
          >
          <el-dropdown-item command="en" :disabled="language === 'en'"
            >English</el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
<script setup>
import { computed } from "vue";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
const store = useStore();
// 实例化i18
const i18 = useI18n();
const language = computed(() => store.getters.language);
// 进行语言切换
const handleSetLanguage = (lang) => {    
  i18.locale.value = lang;
  store.commit("app/setLanguage", lang);
  ElMessage.success("更新完成");
  console.log(lang);
};
</script>

注意这里我们使用了useI18n这个函数来进行实例化,然后我们定义了一个函数handleSetLanguage,用来切换语言,

vuex中的数据

export default {
state: {
    // 获取缓存中的显示文字类型,如果为空默认为中文
    language: getItem(LANG) || "zh",
  },
    mutations: {
    //通过这个方法来修改vuex中的数据
    setLanguage(state, lang) {
      // 给缓存中添加数据
      setItem(LANG, lang);
      state.language = lang;
    },
  },
  }

到此这篇关于在vue3项目中实现国际化的代码示例的文章就介绍到这了,更多相关vue3项目国际化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文