vue-i18n 国际化插件

国际化插件 vue-i18n

1.安装vue-i18n

npm install vue-i18n

//cdn地址
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script

2.main.js中引入

import VueI18n from 'vue-i18n'

Vue.use(VueI18n) // 通过插件的形式挂载

const i18n = new VueI18n({
    locale: 'zh-CN',    // 语言标识
    //this.$i18n.locale // 通过切换locale的值来实现语言切换
    messages: {
      'zh-CN': require('./lang/zh'),   // 中文语言包
      'en-US': require('./lang/en')    // 英文语言包
    }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  i18n,  // 不要忘记
  store,
  router,
  template: '<App/>',
  components: { App }
})

3.语言的切换

    this.$i18n.locale = lang;

4.语言包

     en.js 英文语言包 
            search: 'Search',
     zh.js 中文语言包
           search: '搜索'

5.只需要通过触发事件的形式，来控制 locale 的值，去调用对应的语言包就可以实现国际化

6.数据渲染的模板语法

<div>{{$t('search')}}</div>