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

wuchangjian2021-11-15 13:40:53编程学习

前言

一下内容均是基于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() 来显示数据

效果
在这里插入图片描述

相关文章

集合的框架(非常好记)

 如果想储存多个同类型的数据,一般可以用数组来实现,但是...

Python 户外俱乐部·登顶纪念证书生成器

Python 户外俱乐部·登顶纪念证书生成器

每个周末,我喜欢和户外俱乐部的小伙伴们一起到野外登山徒步,一...

树莓派提升计划 Android应用用MiniChat基本介绍总体架构

2021SC@SDUSC 基本介绍 MiniChat是一款聊天软件ÿ...

记录:Anaconda安装tensorflow时报错Cannot uninstall ‘wrapt‘. It is a distutils installed project and thus we.

记录一下Anaconda安装tensorflow时的报错解决办法. 安装命令: pi...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。