element-ui+vue实现双语切换功能

最新推荐文章于 2025-09-11 04:42:01 发布

原创最新推荐文章于 2025-09-11 04:42:01 发布 · 1.8k 阅读

6 ·

CC 4.0 BY-SA版权

本文详细介绍如何在Vue2项目中结合ElementUI实现i18n国际化语言切换，包括安装配置、代码示例及页面中英文切换实现。

这里主要是vue2+elementUI+i18n 国际化语言切换

1、首先安装i18n：npm install vue-i18n --save

2、在src建以下目录，并附上代码：

cn.js代码：‘’


import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入element语言包
const cn = {
    login: {
        'title':'登录',
        'password':'密码',
    },
    registe: {
        'title':'注册',
        'name':'用户名',
    },
    ...zhLocale
}
 
export default cn;

en.js代码：

import enLocale from 'element-ui/lib/locale/lang/en' //引入element语言包
const en = {
    login: {
        'title':'login',
        'password':'password',
    },
    registe: {
        'title':'registe',
        'name':'userName',
    },
    ...enLocale
}
 
export default en;

index.js代码

import en from './en';
import cn from './cn';
export default {
    en: en,
    cn: cn
}

i18n.js代码：

import Vue from 'vue'
import locale from 'element-ui/lib/locale';
import VueI18n from 'vue-i18n'
import messages from './langs'
Vue.use(VueI18n)
//从localStorage获取语言选择。
const i18n = new VueI18n({
    locale: localStorage.lang || 'en', //初始未选择默认 cn 中文
    messages,
})
locale.i18n((key, value) => i18n.t(key, value)) //兼容element
 
export default i18n

3、在main.js里引入：

import i18n from './i18n/i18n';
 
 
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    store,
    i18n, //很重要，别忘记
    components: { App },
    template: '<App/>'
})

4、使用

1）在标签内作为正文内容

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

2) 作为标签属性使用

<input :placeholder="$t('content.main')" type="text">

3) 作为js中文字使用时

console.log(this.$t('content.main'));

4)vue js中data使用

export default {
  data () {
    return {
      login: $t('login.password'),
    }
  }
}

页面上进行中英文切换，在中英文切换的按钮上绑定事件，如下：

tabEn: function () {
  this.$i18n.locale = 'en'
},
tabCn: function () {
  this.$i18n.locale = 'zh'
}