关于vue2/vue3结合element多语言的处理方案

VTR_xyh

已于 2024-08-23 10:55:09 修改

阅读量419

点赞数 5

文章标签： vue.js elementui 前端框架

于 2024-08-20 18:04:48 首次发布

本文链接：https://blog.csdn.net/VTR_xyh/article/details/141360310

版权

一、介绍

目前能查到的大部分都是针对于vue2和vue3单个的处理方案。或者针对于只修改单个语言的方案。本文章主要针对于如何实现如何动态修改element框架自带的多语言,已经v2和v3版本中如何创建、访问全局i18n实例和局部实例的方案。

二、V2版本

vue-i18n的安装

// 使用 npm
npm install vue-i18n

// 使用 yarn
yarn add vue-i18n

1. 创建自定义多语言文件

//定义中文的语言包
// src/lang/cn.js
const cn = {
  add: {
    "Mute Headset": "开启/关闭声音提示",
    "Mute Microphone": "将麦克风向上反转以设为静音",
    "User Survey": "使用者调查",
    "base info":"{name} 是一个键盘",
  },
  tips: {
    "Grid view": "卡片视图",
    "List view": "列表视图",
  }
};

export default cn;

//定义英语的语言包
// src/lang/en.js
const en = {
  add: {
    "Mute Headset": "Enable/Disable Audio Guidance",
    "Mute Microphone": "Mute by flipping up the microphone",
    "User Survey": "User Survey",
    "base info":"{name} is one keyboard",
  },
  tips: {
    "Grid view": "Grid view",
    "List view": "List view",
  },
};
export default en;

2、创建i18n实例

/src/lang/index.js

import en from './en.js'
import cn from './cn.js'
import VueI18n from "vue-i18n";

const message = {
    en,
    cn
}


// 如果本地缓存记录了语言环境，则使用本地缓存
let lsLocale = localStorage.getItem('locale') || ''

const i18n = new VueI18n({
  locale:lsLocale || 'en' ,
  fallbackLocale: 'en', //该字段表示当用户设置的语言无法正常显示的时候 默认以该字段语言显示
  messages: {
    ...message,
  },
});

export default i18n;

3、引用挂载i18n

// main.js
import Vue from "vue";
import App from "./App.vue";
import VueI18n from 'vue-i18n'
import i18n from "./lang/index.js";
Vue.use(VueI18n) // 全局注册国际化包
new Vue({
  router,
  store,
  i18n,
  render: (h) => h(App),
}).$mount("#app");

4、页面使用i18n

<div>{{$t('tips.Grid view') }}</div>
<div>{{$t('add.Mute Headset')}} </div>

//多语言传参
//cn  lenovo wireless speaker 是一个键盘
//en  lenovo wireless speaker is one keyboard
 <p>{{ $t('tips.base info',{name:'lenovo wireless speaker'}) }}</p>

<script>
console.log(this.$i18n.t('tips.Grid view'))
</script>

5、修改语言

 SetLanguage(value) {
    this.$i18n.locale = value;
    this.$store.commit("setLanguage", value);
    localStorage.setItem("language", value);//保存用户修改 
}

6、引入element ui自带多语言

比如修改时间选择器、messbox等默认的显示语言

//具体的element 多语言文件引入方式可以参考element —i18n

//en.js
import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
    //....
};

Object.assign(en, enLocale)
export default en


//cn.js

import zhLocale from "element-ui/lib/locale/lang/zh-CN";


const cn = {
    //....
};

Object.assign(cn, zhLocale )
export default cn

7、实现修改i18n的当前语言的时候element 自动变化

/src/lang/index.js
// 在创建i18n实例的时候引入element的修改 变量
import ElementLocal from "element-ui/lib/locale";

import en from './en.js'
import cn from './cn.js'
import VueI18n from "vue-i18n";

const message = {
    en,
    cn
}


// 如果本地缓存记录了语言环境，则使用本地缓存
let lsLocale = localStorage.getItem('locale') || ''

const i18n = new VueI18n({
  locale:lsLocale || 'en' ,
  fallbackLocale: 'en', //该字段表示当用户设置的语言无法正常显示的时候 默认以该字段语言显示
  messages: {
    ...message,
  },
});

ElementLocal.i18n((key, value) => i18n.t(key, value));
export default i18n;

8、创建多个i18n实例

有些场景需要创建多个i18n实例。如果把所有多语言文件放到一个类别里，文件内容就会特别大，后期查找和维护比较困难。这个时候需要给单个组件创建自己的i18n实例

//全局i18n实例是在main.js中引入，app.use(i18n)实现

import VueI18n from "vue-i18n";
import Vue from "vue";
Vue.use(VueI18n);
new Vue({
  router,
  store,
  i18n,
  render: (h) => h(App),
}).$mount("#app");




//创建局部的i18n实例

//src/lang/device/index.js

import cn from './cn.js'
import en from './en.js'

import VueI18n from "vue-i18n";
import store from "@/store/index.js"; // 修改当前语言时 保证每个实例化的i18n的当前语言保持一致

const message = {
    en,
    cn
}
const i18n = new VueI18n({
  locale: store.state.language,
  messages: {
    ...message,
  },
});

export default i18n;

9、多实例化页面使用

//device.vue
<template>
    <div>
        //使用局部的i18n
       <div>{{ $t("message.USB Charge Mode") }}</div>

        //使用全局的i18n
         <div>{{ $root.$t("tips.Grid View") }}</div> 
    </div>
    
</template>
<script>
import i18n from "@/lang/device/index.js";

export default {
    data() {
        return {
      
        };
    },
    i18n,
    methods:{
        //this.$root.$i18n.t("tips.Grid View") //全局

        //this.$i18n.t('message.USB Charge Mode')
    }
    
}
</script>

Vue3版本

1、创建i18n实例

//src/lang/index.ts
import { createI18n } from "vue-i18n";
let defalutLanguage = Intl.DateTimeFormat().resolvedOptions().locale;
let message: any = {};
//批量引入所有多语言文件  也可像v2一样单个单个文件引入
const files = import.meta.glob("./lan/*.ts");
for (const path in files) {
  const module = await files[path]();
  const fileName = (path as any)!.match(/\.\/lan\/(.*?)\.ts$/)[1];
  message[fileName] = (module as any).default;
}

const i18n = createI18n({
  locale: localStorage.getItem("language") || "EN",
  fallbackLocale:"SC" ,
  legacy: false, /// 如果想在composition api中使用需要设置为false
  globalInjection: true, // 如果设置true, $t() 函数将注册到全局

  messages: {
    ...message,
  },
 
});

export default i18n;


//main.ts
import { createApp } from "vue";
import i18n from "./lang/index.ts";
const app = createApp(App);
app.use(i18n);

2、页面使用i18n

<template>
     <span>{{ $t("tips.Grid view") }}</span>
</template>



<script lang="ts" setup>
import { useI18n } from "vue-i18n";
let i18n = useI18n();
let { t } = i18n;
console.log(t("tips.Grid view"))
</script>

3、引入element plus自带语言

根据版本不同 element plus自带多语言文件所在路径不同。实际所在参考官方案例

//v3引入element plus自带多语言分两种 再次介绍一种 下面介绍v3修改当前语言时介绍另外一种

//第一种与v2一样 在定义本地多语言文件时 直接引入对应的elment 多语言

/src/lang/cn.ts

import Ecn from "element-plus/es/locale/lang/zh-cn";
const cn = {
//...
}
Object.assign(cn, Ecn);
export default cn;


/src/lang/en.ts

import Een from "element-plus/es/locale/lang/en";
const en = {
//...
}
Object.assign(en , Een );
export default en ;

4、修改多语言当前语言

//修改当前语言

<script lang="ts" setup>
import { useI18n } from "vue-i18n";

let { t, locale } =useI18n();

const SetLanguage = (value:string) => {
  locale.value = value;
  store.setLanguage(value);
  api.setLanguage(value);
};
</script>

5、element plus同步修改当前语言

//element plus修改当前语言分两种。

//另一种引入element plus当前语言

//main.ts
//根据自己需求 直接在main.ts中引入全部所需语言
import Ecn from "element-plus/es/locale/lang/zh-cn";
import Een from "element-plus/es/locale/lang/en";
.....

const local = {
        Ecn,
        Een,
        ....
}
//App.vue


  import { ElConfigProvider } from 'element-plus'


  <el-config-provider :locale="locales">
      <index></index>
   </el-config-provider>


<script setup lang="ts">

let locales = computed(() => {
//备注： 存储的language必须与 local里面的key对应 否则无法找到指定语言
  return local[store.language];
});


//如果不是在main.ts中 直接引入 而是通过 第一种引入 Object.assign(cn, Ecn);

let locales = computed(() => {
    //我也不知道为什么必须加name....没有name 就是渲染不出来
  return { name: store.language, el: i18n.messages.value[store.language].el };
});

</script>

6、创建多个i18n实例

访问局部的暂时没找到什么好的办法，各位有好的思路的可以补充。

<template>
    <div>
        //访问全局的
         <span>{{ $t("tips.Grid view") }}</span>

        
        //局部的
         <div>{{ t("message.Lenovo_Pair_CancelTip") }}</div>

    </div>
</template>
<script lang="ts" setup>
    import { useI18n } from "vue-i18n"; //全局的i18n
    import i18n from "@/lang/device/index.ts";
    let $i18n = useI18n();
    let { t } = i18n.global;

    console.log($I18n.t("tips.Grid view")) //访问全局的
    console.log( t("message.Lenovo_Pair_BtnYes")) //访问局部的
</script>

第一次发帖，有不足或者错误的，请各位见谅，积极提出，我及时修正。谢各位指导。