(demo)使用vue-i18n实现中英文切换

安装依赖

"vue-i18n": "^8.25.0"

增加自定义翻译文件

在src里新增文件夹languages，添加翻译的json文件

zh_CN.json的内容如下：

{
    "public.lang": "中文",
}

en_US.json的内容如下：

{
    "public.lang": "English",
}

引入到项目

main.js中

// 中英文切换
import VueI18n from "vue-i18n";
//element-language
import enLocale from "element-ui/lib/locale/lang/en"; // element
import zhLocale from "element-ui/lib/locale/lang/zh-CN"; // element
import zhTwLocale from "element-ui/lib/locale/lang/zh-TW"; // element
//language
import en_US from "@/languages/en_US.json";
import zh_CN from "@/languages/zh_CN.json";
import zh_TW from "@/languages/zh_TW.json";

const messages = {
  en_US: Object.assign(en_US, enLocale), // 将自己的英文包和element提供的结合
  zh_CN: Object.assign(zh_CN, zhLocale), // 将自己的中文包和element提供的结合
  zh_TW: Object.assign(zh_TW, zhTwLocale), // 将自己的繁体包和element提供的结合
};
const i18n = new VueI18n({
  // 默认语言环境
  locale: localStorage.getItem("language") || "zh_CN",
  // 回退语言环境：指定在当前语言环境下无法找到对应翻译消息时的回退语言环境。
  fallbackLocale: localStorage.getItem("language") || "zh_CN",
  messages,
});
// 将 i18n 实例挂载到 Vue 的原型上，使得在组件中可以通过 this._i18n 来访问国际化实例
// Vue.prototype._i18n = i18n;

new Vue({
  router,
  store,
  render: h => h(App),
  i18n, //
}).$mount('#app')

使用

效果图：

language组件:

<template>
  <div class="lang-line-inside">
    <span class="unversial">Global -</span>

    <el-select
      v-model="language"
      placeholder="请选择"
      popper-class="language-select"
      @change="changeLang"
    >
      <template>
        <el-option
          v-for="item in languageOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </template>
    </el-select>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import { Option, Select } from "element-ui";

export default {
  name: "language",
  data() {
    return {
      language: "zh_CN",
      languageOptions: [
        {
          value: "en_US",
          label: "English",
        },
        {
          value: "zh_CN",
          label: "中文简体",
        },
        {
          value: "zh_TW",
          label: "中文繁體",
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["lang"]),
  },
  mounted() {
    this.language = this.lang ? this.lang : "zh_CN";
  },
  methods: {
    changeLang(LangStr) {
      this.language = LangStr;
      this.$i18n.locale = this.language; //改变语言
      localStorage.setItem("language", this.language);
      this.setLang(this.language);
    },
    ...mapActions(["setLang"]),
  },
  components: {
    "el-select": Select,
    "el-option": Option,
  },
  watch: {
    '$i18n.locale'(newValue) {
      if (this.$i18n.locale === 'zh_CN') {} else if (this.$i18n.locale === 'en_US') {}
    }
  },
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>

模板中：

    <div style="margin-top: 30px">
      {{ $t(`public.lang`) }}
    </div>

js中

  mounted() {
    this.langStr = this.$t("public.lang");
  },

刷新时vuex中lang为空的问题：

router.beforeEach((to, from, next) => {

  if (!store.state.lang) {
    let lang = localStorage.getItem("language");
    if(!lang){
      lang = "zh_CN";
      localStorage.setItem("language", lang);
    }
    store.commit("setLang", lang);
  }
  
})