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”。
