Vue-i18n国际化的使用

安装

　安装vue-i18n依赖，npm i vue-i18n -S或者yarn add vue-i18n

引入

 在src/assets/i18n路径下创建语言包文件

module.exports = {
    message: {
        home: {
            switchLan: "切换语言",
            pleaseEnter: '请输入',
            prompt:"消息提示",
        }
    },
}

在main.js中引入vue-i18n语言包，并全局挂载

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VueI18n from 'vue-i18n'
import ElementLocale from 'element-ui/lib/locale'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import enLocale from './assets/i18n/en.js'
import zhLocale from './assets/i18n/zh-CN.js'
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(VueI18n) // 通过插件的形式挂载
const i18n = new VueI18n({
  locale: 'zh', // 语言标识
  //this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages: {
    en: {
      // 英文环境下的语言数据
      ...enLocale,
      ...elementEnLocale
    },
    zh: {
      // 中文环境下的语言数据
      ...zhLocale,
      ...elementZhLocale
    },
  }
})
ElementLocale.i18n((key, value) => i18n.t(key, value))
new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: '<App/>'
})

页面使用

<template>
  <div>
    <div>
      <!-- 第一种使用方法 -->
      {{ $t("message.home.switchLan") }}
      <el-select v-model="languageVal" @change="changeLanguage">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <!-- 第二种使用方法 -->
      <el-input
        v-model="input"
        :placeholder="$t('message.home.pleaseEnter')"
        style="width: 150px"
      ></el-input>
      <el-button :plain="true" @click="open">
        {{ $t("message.home.prompt") }}</el-button
      >
    </div>
    <!-- element组件 -->
    <div>
       <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="100"
    >
    </el-pagination>
    </div>
   
  </div>
</template>

<script>
export default {
  data() {
    return {
      languageVal: "zh-CN",
      input: "",
      currentPage:1,
      options: [
        {
          value: "zh-CN",
          label: "中文",
        },
        {
          value: "en",
          label: "English",
        },
      ],
    };
  },
  created() {},
  watch: {
    "$i18n.locale"() {
      this.changeLanguage(this.$i18n.locale);
    },
  },
  methods: {
    changeLanguage(row) {
      this.$i18n.locale = row;
    },
    open() {
      //  第三种使用方法
      this.$message(this.$t("message.home.prompt"));
    },
    handleSizeChange(val) {},
    handleCurrentChange(val) {},
  },
};
</script>

<style scoped>
</style>