在vue3项目中实现国际化的代码示例

//定义msg值的数据源
const messages={
   en:{
   msg:"hello world"
 }
  zh:{
   msg:"你好世界"
 }
}
//定义切换变量
let locale="en";
//3.定义赋值函数
function t(key){
    return messages[locale][key]
}

npm i vue-i18n@next

import { createI18n } from "vue-i18n";
//这是我自己创建的语言包
import mZhLocale from "./lang/zh";
import mEnLocale from "./lang/en";
//这里使用了vuex来进行全局的数据共享
import store from "@/store";
//创建messages对象，里面注册相应的语言包，这里面我注册了自己定义的语言包
const messages = {
  en: {
    ...mEnLocale,
  },
  zh: {
    ...mZhLocale,
  },
};
// 进行持久化处理，防止在页面刷新之后数据丢失
const getLanguage = () => {
  return store && store.getters && store.getters.language;
};
const i18n = createI18n({
  legacy: false, // 使用composition API
  locale: getLanguage(),//初始的时候调用这个函数获取vuex中的数据，当然vuex初始数据调用localstorage中存储的数据，或者默认赋值为”zh“
  globalInjection: true,  // 表明使用全局t函数
  messages,
});
export default i18n;//将i18函数导出

import App from "./App.vue";
import i18n from "@/i18n/index";
const app = createApp(App);
app.use(i18n);

export default{
 navBar:{
   home:"Home"
 }
}

export default{
 navBar:{
   home:"主页"
 }
}

<span>{{ $t("navBar.home") }}</span>

 <el-input :placeholder="$t('login.inputName')"></el-input>

import i18n from "@/i18n";
// 根据这个函数来处理面包屑和sidebar
export const generateTitle = (title) => {
  return i18n.global.t("route." + title);
};

<template>
  <el-config-provider :locale="$store.getters.language === 'zh' ? ZhCn : En">
    <router-view></router-view>
  </el-config-provider>
</template>
<script setup>
import En from "element-plus/lib/locale/lang/en";
import ZhCn from "element-plus/lib/locale/lang/zh-cn";
</script>

<template>
  <div>
    <el-dropdown trigger="click" @command="handleSetLanguage">
      <div>
        <el-tooltip content="国际化">
          <div><svg-icon icon="language"></svg-icon></div>
        </el-tooltip>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="zh" :disabled="language === 'zh'"
            >中文</el-dropdown-item
          >
          <el-dropdown-item command="en" :disabled="language === 'en'"
            >English</el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
const store = useStore();
// 实例化i18
const i18 = useI18n();
const language = computed(() => store.getters.language);
// 进行语言切换
const handleSetLanguage = (lang) => {    
  i18.locale.value = lang;
  store.commit("app/setLanguage", lang);
  ElMessage.success("更新完成");
  console.log(lang);
};
</script>

export default {
state: {
    // 获取缓存中的显示文字类型，如果为空默认为中文
    language: getItem(LANG) || "zh",
  },
    mutations: {
    //通过这个方法来修改vuex中的数据
    setLanguage(state, lang) {
      // 给缓存中添加数据
      setItem(LANG, lang);
      state.language = lang;
    },
  },
  }