Vue i18n 中英文切换

最近做的vue项目要实现国际化语言，自己琢磨看文档写出了一个简单的不能再简单的demo，供大家参考!

注：vue-cli项目

1. npm安装

    npm install vue-i18n --save

2. i18n使用，在项目入口文件 main.js 中引入  

    import VueI18n from 'vue-i18n'；

   在 src 目录下创建一个 language 的文件夹，里面建两个 js

    import en from './language/en'；        // 引入en.js 英文内容

    import cn from './language/cn'；         // 引入cn.js 中文内容

    Vue.use(VueI18n)

    const i18n = new VueI18n({

        locale: 'cn',    // 语言标识        

        messages: {

             'cn' : require('./language/cn');

             'en' : require('./language/en');

            }

        })

    vue实例中引入

    new Vue({

        el: '#app',

        router,

        i18n,

        render: h => h(APP)

    })

3. cn.js 和 en.js 内容

    cn.js

module.exports = {
   navList:{
    solution: 'Solution',
    product: 'Product',
    place:'请输入搜索内容'
  }
}

    en.js

module.exports = {
   navList:{
    solution: 'Solution',
    product: 'Product',
    place:'Please enter the search content'
  }
}

4. 页面中使用

    <div class="con">{{ $t('navList.solution') }}</div>

    <div class="box">{{ $t('navList.product') }}</div>

     //input框中 placeholder 的写法  

    <input type="text" :placeholder="$t('navList.place')">

5. data中定义的字段翻译

 rules:{
      name:' cannot be empty'
  }

rules: {name: [{ required: true, message: this.$t('rules.name'), trigger: 'change' }]}

6. 页面中英文切换（需要写点击事件）

   tabCn: function(){
          this.$i18n.locale = 'cn'
   },

   tabEn: function(){
          this.$i18n.locale = 'en'
   }

如果大家有更好的方法，欢迎留言讨论