vue3项目中使用i18n

一、elementplus国际化

创建仓库用来管理语言包

src/stort/lang.js

import { defineStore } from "pinia"; //引入pinia
// 导入 Element Plus 中英文语言包
import zhCn from "element-plus/es/locale/lang/zh-cn";
import en from "element-plus/es/locale/lang/en";

export const useAppStore = defineStore({
  id: "",
  state: () => {
    return { language: "zhCn" };
  },
  // 计算属性
  getters: {
    locale(state) {
      return state.language == "en" ? en : zhCn;
    },
  },
  // 更改函数
  actions: {
    changeLanguage(val) {
      this.language = val;
    },
  },
});

在app.vue中使用elementplus的ElConfigProvider组件实现elementplus国际化

app.vue

<script setup>
import { ElConfigProvider } from "element-plus";
// 自定义国际化
import { useI18n } from "vue-i18n";

const { locale } = useI18n();
const changeLanguage = (val) => {
  locale.value = val;
};
</script>

<template>
  <!--设置默认语言和大小-->
  <el-config-provider :locale="appStore.locale" :size="appStore.size">
    <el-pagination layout="total, sizes, jumper" :total="40" />
    <el-button @click="changeLanguage('en')">切换英文</el-button>
    <el-button @click="changeLanguage('zhCn')">切换中文</el-button>
  </el-config-provider>
</template>

二、vue-i18n国际化

1.下载vue-i18n依赖

npm i vue-i18n

2.创建语言包

src/store/package/en.js

export default {
  // 登录页面
    title: "vue3-element-admin",
    username: "Username",
    password: "Password",
    login: "Login",
    verifyCode: "Verify Code",
  },
  // 导航栏
  navbar: {
    dashboard: "Dashboard",
    logout: "Logout",
    document: "Document",
    gitee: "Gitee",
  },
};

src/store/package/zhCn.js

export default {
  // 登录页面
  login: {
    title: "vue3-element-admin",
    username: "用户名",
    password: "密码",
    login: "登 录",
    verifyCode: "验证码",
  },
  // 导航栏
  navbar: {
    dashboard: "首页",
    logout: "注销",
    document: "项目文档",
    gitee: "码云",
  },
};

 3.在项目中创建实例

src/lang/index.js

import { createI18n } from "vue-i18n";
import { useAppStore } from "@/store/app";
import { store } from "@/store/index";
// 本地语言包
import enLocale from "./package/en";
import zhCnLocale from "./package/zhCn";

const appStore = useAppStore(store);
const messages = {
  zhCn: {
    ...zhCnLocale,
  },
  en: {
    ...enLocale,
  },
};
// 创建 i18n 实例
const i18n = createI18n({
  legacy: false,
  locale: appStore.language,
  messages: messages,
  globalInjection: true,
});
// 导出 i18n 实例
export default i18n;

4.在main.js引入实例

main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "@/router";

// 国际化
import i18n from "@/lang/index";

const app = createApp(App);
app.use(router).use(i18n).mount("#app");

5.在页面中使用i18n

app.vue

<script setup>
import { ElConfigProvider } from "element-plus";
import { useAppStore } from "@/store/app.js";
// 自定义国际化
import { useI18n } from "vue-i18n";

const appStore = useAppStore();

const { locale } = useI18n();
const changeLanguage = (val) => {
  locale.value = val;
  appStore.changeLanguage(val);
};
</script>

<template>
  <el-config-provider :locale="appStore.locale" :size="appStore.size">
    {{ appStore.language }}
    <el-pagination layout="total, sizes, jumper" :total="40" />
    <el-button @click="changeLanguage('en')">切换英文</el-button>
    <el-button @click="changeLanguage('zhCn')">切换中文</el-button>
  </el-config-provider>
</template>

最终效果