VUE前端增加国际化支持
安装vue的i18：
npm install vue-i18n@latest –save
在main.js中增加i18n的支持：
import i18n from “@/i18n”;
const app = createApp(App)
app.use(i18n);
app.mount(‘#app’)
在stores里面增加LanguageStore.ts：
import { defineStore } from ‘pinia’;
import zhCn from ‘element-plus/dist/locale/zh-cn.mjs’
import zhTw from ‘element-plus/dist/locale/zh-tw.mjs’
import en from ‘element-plus/dist/locale/en.mjs’
// 创建 Pinia Store
export const languageStore = defineStore(‘languageStore’, {
//i18n提供自写代码国际化，el-config-provider提供element plus的国际化。以languageStore最为媒介，把两者关联起来
state: () => {
return {
language: sessionStorage.getItem(“localeLang”) || “zhCn”,
languageElement: zhCn,
}
},
actions:{
initElementLanguage(){
switch(this.language){
case “zhCn”: this.languageElement = zhCn; break;
case “zhTw”: this.languageElement = zhTw; break;
case “en”: this.languageElement = en; break;
}
},
languageChange(value: string){
this.language = value
sessionStorage.setItem(“localeLang”, value)
}
},
});
export type State = {
language: string;
};
export const state: State = {
language: sessionStorage.getItem(“localeLang”) || “zhCn”,
};
在App.vue中增加：
import {languageStore} from ‘@/stores/LanguageStore’
let store = languageStore()
store.initElementLanguage()
const language = ref(store.languageElement);
…
<template>
<el-config-provider :locale=”language”>
<div id=”appRoute”>
<RouterView v-slot=”{ Component }”>
<!– <transition> –>
<keep-alive>
<component :is=”Component” v-if=”$route.meta.keepAlive”/>
</keep-alive>
<component :is=”Component” v-if=”!$route.meta.keepAlive”></component>
<!– </transition> –>
</RouterView>
</div>
</el-config-provider>
</template>
在src目录下建立i18n目录，然后建立index.ts文件：
import { createI18n } from “vue-i18n”;
import zhCn from “./language/zh-cn”;
import zhTw from “./language/zh-tw”;
import en from “./language/en”;
const i18n = createI18n({
locale: sessionStorage.getItem(“localeLang”) || “zhCn”,
messages: {
zhCn,
zhTw,
en,
},
});
export default i18n;
然后再i18n目录下建立各种语言的翻译文件，比如en.ts：
export default {
XianGuoZhi_TW: {
selectProducts: “Please select products: “,
selectPayChannel: “Please select pay channel: “,
purchase: “PURCHASE”,
ok: “OK”,
userId: “USER ID: “,
inputUserId: “Please input your user id in game: “,
placeholderUserId: “Please input”,
titleUserId: “Input User ID”,
},
};
比如zh-cn.ts：
export default {
XianGuoZhi_TW: {
selectProducts: “请选择商品：”,
selectPayChannel: “请选择支付通道：”,
purchase: “购买”,
ok: “确定”,
userId: “用户ID：”,
inputUserId: “请输入您在游戏中的用户ID：”,
placeholderUserId: “请输入”,
titleUserId: “输入用户ID”,
},
};
又比如zh-tw.ts：
export default {
XianGuoZhi_TW: {
selectProducts: “請選擇商品：”,
selectPayChannel: “請選擇支付通道：”,
purchase: “購買”,
ok: “確定”,
userId: “用戶ID：”,
inputUserId: “請輸入您在遊戲中的用戶ID：”,
placeholderUserId: “請輸入”,
titleUserId: “輸入用戶ID”,
},
};
然后再需要国际化的vue文件中：
注意：i18n使用时用t(x)函数（js里面用）或者$t(x)函数（html里面用）来翻译对应的语言。
import {languageStore} from ‘@/stores/LanguageStore’
let langStore = languageStore()
import { useI18n } from ‘vue-i18n’
const { t, locale } = useI18n()
const placeholderUserId = ref(t(“XianGuoZhi_TW.placeholderUserId”))
const titleUserId = ref(t(“XianGuoZhi_TW.titleUserId”))
…
<template>
<Header></Header> <!– 用来选择语言的头部组件，见下面 –>
<div>
{{ $t(“XianGuoZhi_TW.selectProducts”) }}
</div>
<div>
<ul style=”list-style-type:none;”>
<li>
{{ $t(“XianGuoZhi_TW.userId”) }}
<el-input v-model=”userIdInput” style=”width: 240px” :placeholder=”placeholderUserId” size=”large” />
</li>
</ul>
</div>
</template>
用来选择语言的Header.vue组件：
<script lang=”ts” setup name=”Header”>
import {onMounted, onBeforeMount, ref, getCurrentInstance} from “vue”
import { useI18n } from “vue-i18n”;
import {languageStore} from ‘@/stores/LanguageStore’
//i18n提供自写代码国际化，el-config-provider提供element plus的国际化。以languageStore最为媒介，把两者关联起来
let store = languageStore()
const { locale } = useI18n();
const langType = {
“zhCn”: “简体”,
“zhTw”: “繁體”,
“en”: “English”,
}
const handleCommand = (value: string) => {
locale.value = value;
store.languageChange(value);
};
</script>
<template>
<div class=”header”>
<el-dropdown @command=”handleCommand”>
<span class=”el-dropdown-link”>
{{ langType[store.language] }}
<el-icon class=”el-icon–right”>
<arrow-down />
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command=”zhCn”>{{ langType[‘zhCn’] }}</el-dropdown-item>
<el-dropdown-item command=”zhTw”>{{ langType[‘zhTw’] }}</el-dropdown-item>
<el-dropdown-item command=”en”>{{ langType[‘en’] }}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
<style lang=”less”>
.header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
</style>