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

前言

一下内容均是基于vue3.0进行的
vue3版本的vue-i8n用法还是有挺大区别的相对于之前的版本

安装

npm install vue-i18n@next -S

创建目录及文件

- plugins		根目录，放一些插件配置文件
-- i18n			存放中英文配置的目录
-- ch.ts        中文
-- en.ts        英文
-- index.ts     出口文件

配置中英文对照表

注：键名要一 一对应

ch.ts

module.exports = {
  //语言
  language: {
    name: "简体中文",
    current: "当前语言",
  },
  //菜单
  menus: {
    home: "首页",
    about: "关于我们",
  },
};

en.ts

module.exports = {
  //语言
  language: {
    name: "Engilish",
    current: "Current Language",
  },
  //菜单
  menus: {
    home: "Home",
    about: "About",
  },
};

出口文件：index.ts

import { createI18n } from "vue-i18n";

const i18n = createI18n({
  //设置默认地区
  locale: localStorage.getItem("lang") || "ch",
  //备选区域
  fallbackLocale: "en",
  //设置地区对应的语言
  messages: {
    ch: require("./ch.ts"),
    en: require("./en.ts"),
  },
});

export default i18n;

使用

• 在main.ts 里全局引入

//语言配置
import VueI18n from "./plugins/i18n/index.ts";

app
  .use(VueI18n)
  .mount("#app");

• 在页面中使用

<template>
  <div>
      <el-button type="primary" @click="changeLanguage('ch')">中文</el-button>
      <el-button type="primary" @click="changeLanguage('en')">英文</el-button>
      <!-- 内容 -->
      <h2>{{$t('menus.home')}}</h2>
  </div>
</template>

<script lang="ts">
import { defineComponent} from "vue";
import { useI18n } from "vue-i18n";
export default defineComponent({
  setup() {
    const { locale, t } = useI18n();
    //通过local.value切换
    const changeLanguage = (val) => {
      locale.value = val;
      //保存一下修改的值
      localStorage.setItem("lang", locale.value);
    };

    return {
      changeLanguage,
    };
  },
});
</script>

<style scoped lang="scss">
</style>

通过$t() 来显示数据

效果