学习vue-i18n记录

这是第一次写博客
刚刚开始学习vue，把学习vue-i18n记录一下
首先安装vue-i18n

cnpm install vue-i18n

在common中建立一个文件夹

在两个文件夹中编写需要中英文切换的字段

//zh.js
export const m={
    test1:{
        aaa:'任何值得做的，就把它做好',
        bbb:'幸福是太多和太少之间的一站。',
        ccc:'恋爱中，干傻事总是让人感到十分美妙。'
    }
}

//en.js
export const m={
    test1:{
        aaa:'Whatever is worth doing is worth doing well.',
        bbb:'Happiness is a way station between too much and too little.',
        ccc:'In love folly is always sweet.'
    }
}

在main.js中配置i18n

import VueI18n from 'vue-i18n'

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

new Vue({
  el: '#app',
  router,
  i18n,  
  store,
  components: { App },
  template: '<App/>'
})

建立一个i18ntest的vue文件

<template>
  <div id="i18na">
    <p>{{$t('m.test1.aaa')}}</p>
    <h1>{{$t('m.test1.bbb')}}</h1>
    <div>{{$t('m.test1.ccc')}}</div>
    <p>i18n测试</p>
    <button @click="changeyy">语言</button>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    changeyy: function() {  //切换语言按钮
      let locale = this.$i18n.locale;
      console.log(locale);
      locale === "zh-CN"? (this.$i18n.locale = "en-US"): (this.$i18n.locale = "zh-CN");
    }
  }
};
</script>

这样就完成了简单的中英文切换

参考文档 https://blog.csdn.net/Dream_xun/article/details/82743762