vue中使用国际化i8n切换语言

1 安装依赖

//安装antd插件，这个跟i18n无关，写整体页面的时候用的这个插件
npm install ant-design-vue --save-dev
//安装i18n依赖
npm install vue-i18n --save-dev

2 创建自己的国际语言文件
（目录自己定义），文件里面要写的就是所有切换语言的时候要切换的词条

en.js文件中内容

const EN  = {
    "测试moment插件": "test moment",
    "英文": 'English',
    "中文": 'Chinese'
}

export default EN

zh.js中内容

const ZH  = {
    "测试moment插件": "测试moment插件",
    "英文": "英文",
    "中文": "中文"
}

export default ZH

3 在main.js中引用插件vue-i18n和语言文件并配置

//引入VueI18n
import VueI18n from 'vue-i18n'
//引入语言文件，目录啥的按照自己的目录来
import ZH from './config/language/zh'
import EN from './config/language/en'
//使用antd组件写的，所以引入Antd，这个跟i18n没关系
import Antd from 'ant-design-vue'
//全局使用
Vue.use(Antd)
Vue.use(VueI18n)

//开始配置
/* I18N */
const messages = {
  ZH: ZH,
  EN: EN
}
// 判断浏览器的主体语言
let language = window.navigator.language.toLocaleLowerCase().indexOf('zh') > -1 ? 'ZH' : 'EN';
if (!localStorage.getItem('languageSetting')) {
  localStorage.setItem('languageSetting', language);
}

// 使用
const i18n = new VueI18n({
  local: localStorage.getItem('languageSetting'),
  messages
})

//注意，把i18n,写进去，不然不生效
new Vue({
  router,
  i18n,
  render: h => h(App)
}).$mount('#app')

4 在页面中使用

<template>
  <div>
  //产量也要加双括号，并且前面加$t
    div{{$t('测试moment插件')}}</div>
    
    <!-- i18n 切换语言-->
    <a-dropdown :trigger="['click']">
      <a class="ant-dropdown-link">
      //这里$t代表的就是这个词要被转换
        {{$t(languageName)}}
        <a-icon type="down" />
      </a>
      <a-menu slot="overlay">
        <a-menu-item
          v-for="item in languageList"
          :key="item.value"
          @click="setLanguage"
        >{{$t(item.name)}}</a-menu-item>
      </a-menu>
    </a-dropdown>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  components: {
    
  },
  data() {
    return {
      languageList: [
        {
          name: "中文",
          value: "ZH"
        },
        {
          name: "英文",
          value: "EN"
        }
      ],
      languageName: "中文"
    };
  },
  created() {
    // 初始化加载i18n，把浏览器默认语言设为默认显示语言
    this.$i18n.locale = localStorage.getItem('languageSetting');
    this.languageName = this.languageList.find(item => item.value == this.$i18n.locale).name
  },
  methods: {
    // 点击切换语言
    setLanguage(e) {
      this.$i18n.locale = e.key;
      localStorage.setItem("languageSetting", e.key);
      this.languageName = this.languageList.find(
        item => item.value == e.key
      ).name;
    }
  }
};
</script>

<style scoped>
</style>