需求:实现中英文两种状态切换(晋级:多种语言切换),方便不同国家人员进行使用
以飞书业务为例
一. 基础用法
安装插件 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')
})()
-
创建语言包(因翻译语言内容过多,一般会单独创建文件夹)
-
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
-
zh中文翻译包
const zh = { title: '工资查询', payDetails: '工资明细', bonus: '奖金明细', } export default zh
-
en英文翻译包
const en = { title: 'Payslip', payDetails: 'Salary Details', bonus: 'Bonus Details', } export default en
-
组件中使用
<div class="title">{{ $t('frontPage.title')}}</div>
二. 注意事项
-
data中定义时无法切换
以this.$t('xxx.xxx')
在data中进行定义使用时,数据是无法正常进行语言转换的,需要将数据定义在computed
中后用this引用即可正常切换。
注:标签内部使用时不用加 {{ }}
<li-select
v-model="form[formVariables[index1]].value"
clearable
:placeholder="$t('pleaseChoose')"
>
-
不同转换方式
-
使用
/^en\b/.test(navigator.language)
获取当前浏览器语言,全局调用,在页面中根据当前语言环境自动转换(正则用于判断当前语言类型,同一种语言可能有一些相似的名称,例如"en", "en-US")。 -
页面中放入按钮,绑定@click事件转换
-
<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>
参考文献