vue国际化实战

前言

写一个中英文的切换demo

主要技术栈

vue-cli4 + element + elementui

插件引入

 npm i element-ui --save
//引入i18n
 npm i vue-i18n --savee

新建文件

src目录下新建一个lang文件夹，在lang文件下面新建三个文件分别是index.js, en_US.js, zh_CN.js

//  en_US.js文件
export default {
    routes: {
        index: '简介'
    },
    layout: {
        loginOut: 'loginOut',
        successMessage: 'Congratulations on your success',
        switchLanguage: 'switch language',
    }
}

//zh_CN.js文件
export default {
    routes: {
        index: 'Intruduction'
    },
    layout: {
        loginOut: '登出',
        successMessage: '恭喜成功',
        switchLanguage: '切换语言',
    }
}

// index.js
import Vue from 'vue'
import VueI18n from "vue-i18n";
import ElementLocale from 'element-ui/lib/locale'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import langZh from "./zh_CN.js"
import langEN from "./en_US.js"
Vue.use(VueI18n)

const i18n = new VueI18n({
    locale: 'zh',
    messages: {
        'zh': {...langZh,...zhLocale},
        'en': {...langEN,...enLocale}
    }
})
ElementLocale.i18n((key, value) => i18n.t(key, value))

export default i18n

main.js配置

//main.js
import i18n from './lang'
import locale from 'element-ui/lib/locale/lang/en'

Vue.use(ElementUI, { locale });

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

修改语言类型

switchLang(val){
                this.$i18n.locale = val
            }

组件内部使用 $t('')

 

        {{$t('layout.switchLanguage')}}
        
{{$t('layout.successMessage')}}
    

js内使用

this.$i18n.locale = 'zh'