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

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

2023-07-14 11:54:45 作者：前端随想

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

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

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

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

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

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

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

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

初始化配置

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

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

首先安装指定的包

npm i vue-i18n@next

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

创建一个组件用于修改locale
配置修改element-plus的语言包
创建并导入自定义的语言包

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

首先在src文件下面创建一个i18n文件夹专门用来处理国际化的问题
然后在里面新建index.js文件
并且建立一个文件夹名称为lang，专门用来存放自定义的语言包

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的给出的方案中，我们一般这么处理：

在APP.vue中使用el-config-provider组件将router-view标签包裹
其次我们需要给locale定义值，这里我们同样还是使用vuex中的共享数据来进行定义，判断vuex中的存储的值，如果是zh的化就配置中文语言包，否则就是英文语言包。
我们需要导入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，用来切换语言,

在函数内部，通过修改i18.locale.value的值来更新当前语言。
然后调用store.commit方法来触发名为"setLanguage"的Vuex mutation，更新store中的语言状态。
使用computed函数创建名为language的计算属性,language属性依赖于store.getters.language，即从Vuex store的language`的getters中获取当前语言。

vuex中的数据

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

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