vue-i18n 搭建多语言国际化

1.下载依赖

cnpm install vue-i18n --save

2.在项目的src文件夹下创建文件

• src/locale/langs/zh-cn.js 文件内容：

        const lang = {
          title: '标题',//（标题）
          title1: '标题2',//（标题2）
          placeholder: '请输入',//请输入中文
        }
        export default lang

• src/locale/langs/en.js 文件内容：

        const lang = {
          title: 'title',//（标题）
          title1: 'title1',//（标题2）
          placeholder: 'Please enter',//请输入中文
        }
        export default lang

• src/locale/index.js 文件内容：

   import Vue from 'vue'
    import VueI18n from 'vue-i18n'
    import en from './langs/en.js'
    import zh from './langs/zh.js'
    import enLocale from 'element-ui/lib/locale/lang/en'
    import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

    Vue.use(VueI18n)

    const i18n = new VueI18n({
      locale: 'zh-CN',
      messages: {
        'zh-CN': { ...zhLocale, ...zh },
        'en': { ...enLocale, ...en }
      }
    })

export default i18n

3.在main.js文件中导入创建好的vuei18n实例

import Vue from 'vue'
import App from './App.vue'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import i18n from './locale'

Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

Vue.config.productionTip = false;

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

4.使用

• 方法

methods: { 
    changeLocale (lang) { 
        this.$i18n.locale = lang 
    } 
}

• 模板里使用

<h3>{{ $t('title') }}</h3>
<h3>{{ $t('title1') }}</h3>
<el-input :placeholder="$t('placeholder')"></el-input>
<h3>{{ $t('el.datepicker.clear') }}</h3> // element-ui中的
<h3>{{ $t('el.datepicker.today') }}</h3> // element-ui中的
<h3>{{ $t('el.datepicker.clear') }}</h3> // element-ui中的
<button @click="changeLocale('en')">En</button>
<button @click="changeLocale('zh-CN')">Zh</button>