i18n 在.vue/.js 的使用

vue-i8n  在后台或前台项目中常常被用到

在此处做个记录，帮助别人，同时也让自己加深一遍印象

下载i8n  这在https://www.npmjs.com/中能查到

npm i vue-i18n

 重点在于i18n的使用，在此我先粘贴代码，后续放讲解

main.js文件

import { createApp } from "vue";

import App from "./App.vue";
import i18n from "./locale";


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

src文件下的locale文件，是我用来创建i18n和存储本地用到的多语言

local文件夹下的index.js

import { createI18n } from "vue-i18n";

import en from "./modules/en";
import cn from "./modules/zh";

export const LOCALE_OPTIONS = [
  { label: "中文", value: "zh-CN" },
  { label: "English", value: "en-US" },
];

const defaultLocale = localStorage.getItem("locale") || "en-US";

const i18n = createI18n({
  locale: defaultLocale,
  legacy: false,
  allowComposition: true,
  messages: {
    "en-US": en,
    "zh-CN": cn,
  },
});
export default i18n;

local文件夹下的modules文件夹存放英文和中文语言包

modules下的en.js

export default {
  home:'Home'
};

modules下的zh.js

export default{
    home:'首页'
}

到此，基础的配置已经结束，我这里只配了一个home首页来测试中英文切换

在vue文件中的使用

<template>
<div>{{$t("home")}}</div>
</template>

在js文件中的使用，主要是使用i8n 的t函数，以下展示两种方式

方式1:

import {useI18n} from "vue-i18n"

const i18 = useI18n()  //error

// 如果直接在外部环境使用的话，会提示i8n必须在setup语法中，所以可以创建一个方法

const useI18nFn = ()=>{
    const i18 = useI18n()
    console.log(i18n.t("home")) // t函数
    console.log(i18n.local.value) // 当前的语言环境
}

方式2:

// 因为我注册i8n 是在  local文件夹下的index.js中

// 所以在这里使用，要先导入

import i18n from "@/local"

// 在这里就可以随便取用，不过要注意t函数所在的位置

console.log(i18n.global.t("home"))

//获取当前的语言环境

console.log(i8n.global.local.value)

以上就是配置i18n，以及在js和vue文件中的使用

特别注意，一定不要忘记导入组件的语言包，如果使用element-plus，那么就可以如下导入

<template>
  <el-config-provider :locale="locale">
    <router-view></router-view>
  </el-config-provider>
</template>

<script setup>
import { computed } from "vue";


import useLocale from "@/hooks/locale";

import zhCn from "element-plus/es/locale/lang/zh-cn";
import en from "element-plus/es/locale/lang/zh-cn";
import zhTw from "element-plus/es/locale/lang/zh-tw";
import ja from "element-plus/es/locale/lang/ja";
const { currentLocale } = useLocale();

const locale = computed(() => {
  switch (currentLocale.value) {
    case "zh-CN":
      return zhCn;
    case "en-US":
      return en;
    case "zh-TW":
      return zhTw;
    case "ja-ri":
      return ja;
    default:
      return en;
  }
});

</script>

如果使用vant 可以如下导入

<template>
  <a-config-provider :locale="locale">
    <RouterView />
  </a-config-provider>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import enUS from "@arco-design/web-vue/es/locale/lang/en-us";
import zhCN from "@arco-design/web-vue/es/locale/lang/zh-cn";
import useLocale from "@/hooks/locale";

const { currentLocale } = useLocale();

const locale = computed(() => {
  switch (currentLocale.value) {
    case "zh-CN":
      return zhCN;
    case "en-US":
      return enUS;
    default:
      return enUS;
  }
});

</script>

 createI18n({
  locale: defaultLocale,
  legacy: false,
  allowComposition: true,
  messages: {
    "en-US": en,
    "zh-CN": cn,
  },
});

讲解一下这块，local ：本地语言环境   message ：数据源  legacy :默认是ture 是否启用或禁用遗留模式

allowComposition 配合legacy 遗留模式使用

源码中显示

If you specified `allowComposition: true` option in Legacy API mode, return `true`, else `false`. else you use the Composition API mode, this property will always return `true`.

翻译：

如果你在遗留API模式下指定了‘ allowComposition: true ’选项，返回‘ true ’，否则返回‘ false ’。否则你使用复合API模式，这个属性将总是返回“true”。