使用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() 来显示数据

效果
在这里插入图片描述

相关文章

“95后”女孩从长沙带出一支队伍,拿下全国冠军!

“95后”女孩从长沙带出一支队伍,拿下全国冠军!

2022-08-22 15:42:49 2021-22赛季中国初中篮球...

为何一些游泳馆的水那么脏?

2022-08-23 09:40:09 刚游完泳回到家,不到半个小时的...

2900余名老人购买养老神药被骗,涉案金额达800余万元!

2900余名老人购买养老神药被骗,涉案金额达800余万元!

2022-08-16 14:32:48 评书机播放广告,“博举丹”药效...

北京昌平通报疫情防控工作开展情况,划定中、高风险区域

2022-08-15 17:42:48 据央视新闻,今天(15日)下午...

海南海口全域静态管理时间延长至8月16日凌晨1时

2022-08-14 21:42:48 据海南省海口市新型冠状病毒肺炎...

发表评论    

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