VUE i18n 国际化

基本使用

1、在新建的项目下，在根目录下使用 npm安装依赖

2、 引入vue-i18n

在main.js中引入vue-i18n

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({

    messages: {

         'zh-CN': require('./common/lang/zh-CN'),

         'en-US': require('./common/lang/en-US')

     }

})

new Vue({

        el: '#app',

        router,

         i18n,//一定要记得写

         components: { App },

         template: '<App/>'

})

3、这时我们还没有切换语言的语言包，在src文件夹下建common文件夹，common下建lang文件夹，lang文件夹下在建两个js文件，一个写中文，一个写英文。

4、编辑语言包 

比如在中文zh-CN.js文件中

module.exports = {
  demo: {
    'language': '中文' 
  }
}

然后顺手在英文en-US.js中

module.exports = {
  demo: {
    'language': 'Chinese'
  }
}

注意我们的每个语言包是对应的

5、在页面中使用

<Button type="primary" style="margin-top: 20px;" @click="change('zh')">中文</Button>
<Button type="primary" style="margin-top: 20px;" @click="change('en')">英文</Button>
<p>{{$t('demo.language')}}</p>

created(){
    this.$i18n.locale = "zh-CN";
  },
  methods: {
    change(language1){
      switch(language1){
        case 'zh':
          this.$i18n.locale = "zh-CN";
          break
        case 'en':
          this.$i18n.locale = "en-US";
          break
      }
      
    },
  }

以上只是国际化的简单使用，不过流程就是这样的。