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

蓝天好美

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

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

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

1. //定义msg值的数据源
   
2. const messages={
   
3.   en:{
   
4.   msg:"hello world"
   
5. }
   
6.  zh:{
   
7.   msg:"你好世界"
   
8. }
   
9. }
   
10. //定义切换变量
    
11. let locale="en";
    
12. //3.定义赋值函数
    
13. function t(key){
    
14.    return messages[locale][key]
    
15. }

复制代码

讲解一些国际化的实现方式，其实就是定义了一个对象，然后在这个对象中包含两种（当然也可以是多种）语言，比如在这里这个

1. messages

复制代码

对象中就包含两个对象分别文

1. en

复制代码

和

1. zh

复制代码

，这两个对象中都有同一个属性

1. msg

复制代码

，

1. zh

复制代码

中对应的是中文，而

1. en

复制代码

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

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


初始化配置

在了解了国际化的原理之后，其实实现国际化的原理并不复杂，那么我们在实际项目中是如何做的呢？
在开发过程中，一般我们需要借助第三方的包来实现。
首先安装指定的包

1. npm i vue-i18n@next

复制代码

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

• 创建一个组件用于修改locale
  
• 配置修改
  1. element-plus

  复制代码
  的语言包
  
• 创建并导入自定义的语言包
  

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

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

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

复制代码

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

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

复制代码

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

1. $t函数

复制代码

在项目中使用

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

1. export default{
   
2. navBar:{
   
3.   home:"Home"
   
4. }
   
5. }

复制代码

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

1. export default{
   
2. navBar:{
   
3.   home:"主页"
   
4. }
   
5. }

复制代码

这里只是做一个实例。

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

复制代码

这

1. t函数

复制代码

的第一种使用方式,我们当然还会遇到其他的情况。
就比如说是在登录注册页面中的输入框我们也想要使用t函数来进行国际化的处理：

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

复制代码

没有发生太大的变化，只是要注意一下，当然我们有的时候可能需要封装一个函数，然后在函数中我们封装了国际化的相关需求，这个时候如何做呢？
其实也不复杂，比如我们封装了一个函数用来处理sideBarItem中的标题。

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

复制代码

这里面我们导入了之前创建的I18n文件夹下面的idnex.js文件，注意最后我们在函数返回值上面通过

1. i18n.global.t()

复制代码

来将相应的值返回。

element-plus组件中的国际化处理
来源:https://www.jb51.net/javascript/292164jeo.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！