安装 vue-i18n

npm install vue-i18n

建立如下结构的文件：

en-us.js 和 zh-cn.js 分别用于存放英文语言包内容和中文语言包内容。

index.js 文件代码如下：

import vue from "vue";
import vueI18n from "vue-i18n";
import enUs from "./lang/en-us";
import zhCn from "./lang/zh-cn";
import store from "../store/index";
const language = store.getters.getLanguage;

vue.use(vueI18n);

const i18n = new vueI18n({
  locale: language,
  messages: {
    "en-us": enUs,
    "zh-cn": zhCn,
  },
});

export default i18n;

en-us.js 代码如下：

export default {
  home: {
    title: "TITLE",
    name: "NAME",
    age: "AGE",
  },
};

zh-cn.js 代码如下：

export default {
  home: {
    title: "标题",
    name: "姓名",
    age: "年龄",
  },
};

vuex 部分文件结构如下：

changeLanguage.js 代码如下：

import localstore from "@/utils/localstore_polyfill.js";

const language = {
  state: {
    language: "en-us",
  },
  mutations: {
    setLanguage(state, payload) {
      state.language = payload.language;
    },
  },
  actions: {
    changeLanguage(context, payload) {
      localstore.setItem("lang", payload.language);
      context.commit("setLanguage", payload);
    },
  },
  getters: {
    getLanguage(state) {
      const storeStr = localstore.getItem("lang");
      if (storeStr !== null && storeStr) {
        return storeStr;
      }
      return state.language;
    },
  },
};

export default language;

store 文件夹下 index.js 代码如下：

import Vue from "vue";
import Vuex from "vuex";
import language from "./modules/changeLanguage";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    language,
  },
});

main.js 文件代码更改后如下：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import i18n from "./locales/index.js";

Vue.config.productionTip = false;

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

现在在项目中就可以这样使用了，如 language.vue 组件中使用如下：

<template>
  <div class="wrapper">
    多语言
    <p>标题：{{ $t("home.title") }}</p>
    <p>姓名：{{ $t("home.name") }}</p>
    <p>年龄：{{ $t("home.age") }}</p>
    <select name="" id="" v-model="locales" @change="getSelect">
      <option value="" disabled>请选择</option>
      <option>en-us</option>
      <option>zh-cn</option>
    </select>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  computed: {
    ...mapGetters(["getLanguage"]),
  },
  data() {
    return {
      locales: this.getLanguage,
    };
  },
  mounted() {},
  methods: {
    ...mapActions({
      'language': 'changeLanguage'
    }),
    getSelect () {
      this.$i18n.locale = this.locales;
      this.language({ language: this.locales });
    }
  },
};
</script>

如果想在路由配置文件中使用，则可以这样，如：

import i18n from "@/locales"
i18n.t("home.name");

如果搭配 Vant 使用，则上述 index.js 文件代码更改如下：

import vue from "vue";
import vueI18n from "vue-i18n";
// 引入自定义语言包
import enUs from "./lang/en-us";
import zhCn from "./lang/zh-cn";

import { Locale } from 'vant';
// 引入vant英文语言包
import vantEnUS from 'vant/es/locale/lang/en-US';
// 引入vant中文语言包
import vantZhCN from "vant/es/locale/lang/zh-CN";
import store from "../store/index";
const language = store.getters.getLanguage;

vue.use(vueI18n);

const messages = {
  "en-US": {
    ...enUs,
    ...vantEnUS
  },
  "zh-CN": {
    ...zhCn,
    ...vantZhCN
  },
}

export const getLocale = () => {
  const currentLanguage = language;
  if (currentLanguage) {
    document.documentElement.lang = currentLanguage;
    return currentLanguage;
  }

  // Default language is english
  return "en-US";
};

const CURRENT_LANG = getLocale();
// first entry
Locale.use(CURRENT_LANG, messages[CURRENT_LANG])

const i18n = new vueI18n({
  locale: CURRENT_LANG,
  messages
});

export default i18n;