vue实现中英/中外语言切换

大家好，欢迎来到IT知识分享网。

需求：实现中英文两种状态切换（晋级：多种语言切换），方便不同国家人员进行使用

以飞书业务为例

一. 基础用法  

安装插件 vue-i18n

yarn add vue-i18n npm install vue-i18n

在 main.js 中导入并作为插件使用

 import VueI18n from 'vue-i18n' Vue.use(VueI18n) 或 Vue.use({ i18n: (key, value) => i18n.t(key, value) }) store.commit('setLang', /^en\b/.test(navigator.language))//全局定义 new Vue({ router, store, i18n, //挂载在全局 render: (h) => h(App) }).$mount('#app') })()

1. 创建语言包（因翻译语言内容过多，一般会单独创建文件夹）

1. index配置

   import Vue from 'vue' import VueI18n from 'vue-i18n' // 从语言包文件中导入语言包对象 import zh from './language/zh' import en from './language/en' Vue.use(VueI18n) const i18n = new VueI18n({ locale: 'zh', messages: { zh: { ...zh }, en: { ...en } }, //silentTranslationWarn: true //配置翻译包时如果弹出大量警告时配置 }) export default i18n

1. zh中文翻译包

   const zh = { title: '工资查询', payDetails: '工资明细', bonus: '奖金明细', } export default zh

1. en英文翻译包

   const en = { title: 'Payslip', payDetails: 'Salary Details', bonus: 'Bonus Details', } export default en

1. 组件中使用

   <div class="title">{ 
       { $t('frontPage.title')}}</div>

二. 注意事项

1.   data中定义时无法切换

          以this.$t('xxx.xxx')在data中进行定义使用时，数据是无法正常进行语言转换的，需要将数据定义在computed中后用this引用即可正常切换。

注：标签内部使用时不用加 {
{ }}

 <li-select v-model="form[formVariables[index1]].value" clearable :placeholder="$t('pleaseChoose')" >

1.   不同转换方式

   • 页面中放入按钮，绑定@click事件转换

   使用 /^en\b/.test(navigator.language)获取当前浏览器语言，全局调用，在页面中根据当前语言环境自动转换（正则用于判断当前语言类型，同一种语言可能有一些相似的名称，例如”en”, “en-US”）。

<template> <li-button type="primary" plain @click="$router.push('/history')">{   { $t('declarationHistory') }}</li-button> </template> <script> data(){ return{ language:this.$i18n.locale,//切换中英 } } methods:{ changeLang(){ this.language=this.$i18n.locale === 'zh'? this.$i18n.locale = 'en': this.$i18n.locale = 'zh'; } } </script>

参考文献

1. Vue I18nhttps://kazupon.github.io/vue-i18n/zh/