Vue使用VueI18国际化


最近公司的有国外的客户需要定制我们的后台项目,需要把所有的语言换成英文,正好这个项目没有做国际化,这次也把中英文切换给做了

我们的后台项目使用的是element.ui,这个ui也支持国际化,不过国际化这块的文档并不是很丰富,兼容的版本比较低.

VueI18n已经更新到比较高的版本了,不过使用高版本的VueI18也是很简单的.

  1. 首先安装
    npm install vue-i18n
  • 因为需要中英文两份语言,切换的时候需要动态切换语言内容,所以所有文字都不能写死.
  1. 创建common目录,创建中英文两份文件en.js与zh.js文件
    export const lang = {
    message:'中文'
    }
    export const lang = {
    message:'英文'
    }

变量名字要一样的,切换的时候才能动态的切换.

  1. 再创建index.js文件,在index.js里面引入element.ui的中英文文件与vue.
    import Vue from 'vue'
    import Element from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    import enLocale from 'element-ui/lib/locale/lang/en'
    import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
  • 这里引入element在main.js里面也就无需再引入了.

  • 并且引入我们的Vuel18
    import VueI18n from 'vue-i18n'
  • 实例化我们的i18n插件,并且添加element.ui语言包
    Vue.use(Element, {
    i18n: (key, value) => i18n.t(key, value)
    });
    //国际化
    const i18n = new VueI18n({
    locale: 'en-US', // 语言标识, 通过切换locale的值来实现语言切换,this.$i18n.locale 
    messages: {
        //导入国际化语言文件,并且添加Element语音包
        'zh-CN': Object.assign(require('./zh'), zhLocale), // 中文语言包
        'en-US': Object.assign(require('./en'), enLocale) // 英文语言包
    }
    })
    export default i18n

使用起来也非常的简单

  1. 在main.js中引入index.js文件
    new Vue({
    i18n,
    router,
    store,
    render: h => h(App)
    }).$mount('#app')
    html中使用$t('lang.你的变量名')
    在js中添加this.$t('lang.你的变量名')即可

如果需要在其他js文件中使用直接

import i18n from '../common/lang/index'
然后i18n.t('lang.你的变量名')即可

切换语言时只需要改变this.$i18n.locale就行了.

这样语言国际化就完成了.

声明:前端编程学习记录|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - Vue使用VueI18国际化


行路有良友,便是捷径。带上我吧,一起去看更大的世界。