注意
已發(fā)現(xiàn) 9.2.2版本的vue-i18n 如果使用cnpm安裝，打包會報(bào)錯(cuò)，使用npm或者pnpm安裝依賴沒有問題
引入
如果需要多語言支持，那么最好在項(xiàng)目搭建之初我們就集成好國際化
vue i18n官網(wǎng)
demo項(xiàng)目地址
關(guān)于多窗口國際化不同步更新狀態(tài)的問題解決方案
1.引入依賴
npm install vue-i18n@9
2.集成vue i18n
1.我們現(xiàn)在src下面創(chuàng)建locals目錄，里面創(chuàng)建packages目錄,然后分別創(chuàng)建en.ts和zh-cn.ts
// src\locales\package\en.ts
export default {
// app相關(guān)文本
app: {
title: 'demo'
},
};
// src\locales\package\zh-cn.ts
export default {
// app相關(guān)文本
app: {
title: '精彩案例'
},
};
2.我們在locals目錄下創(chuàng)建index.ts
// src\locales\index.ts
import { createI18n } from 'vue-i18n';
import zhCn from './package/zh-cn';
import en from './package/en';
import CacheUtils from '@utils/cacheUtils';
// 創(chuàng)建 i18n
const i18n = createI18n({
legacy: false, // 解決Not available in legacy mode報(bào)錯(cuò)
globalInjection: true, // 全局模式，可以直接使用 $t
locale: 'zhCn',
messages: {
zhCn,
en
}
});
export default i18n;
目錄結(jié)構(gòu)如圖所示：
3.調(diào)整main.ts
// src\main.ts
import i18n from './locales';
// ...
// 配置國際化
app.use(i18n)
3.測試代碼
接著我們在HelloWorld頁面補(bǔ)充國際化代碼：
// src\components\HelloWorld.vue
<template>
<h1>{{ $t('app.title') }}</h1>
</template>
顯示效果如圖所示：
- 并且隨著我們切換 i18n的 locale字段，可以看到文本自動(dòng)變成對應(yīng)語言
4.封裝多語言切換組件
我們知道只要改變i18n的locale的值就能修改應(yīng)用的語言，那么我們完全可以基于element-plus封裝一個(gè)多語言切換的組件：
// src\components\Language.vue
<template>
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
{{ currentLang == 'zhCn' ? '中文' : 'English' }}
<el-icon class="el-icon--right">
<arrow-down />
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="zhCn" :disabled="currentLang == 'zhCn'">中文</el-dropdown-item>
<el-dropdown-item command="en" :disabled="currentLang == 'en'">English</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
<script lang="ts" setup>
import { ArrowDown } from '@element-plus/icons-vue'
import { useI18n } from 'vue-i18n';
import { computed } from 'vue';
const i18n = useI18n()
// 計(jì)算屬性獲取i18n的值
const currentLang = computed(() => i18n.locale.value)
// 切換語言
function handleCommand(command: string) {
i18n.locale.value = command
}
</script>
<style scoped>
.example-showcase .el-dropdown-link {
cursor: pointer;
color: var(--el-color-primary);
display: flex;
align-items: center;
}
</style>
5.測試多語言切換
我們在HelloWorld.vue文件中引入多語言插件：
運(yùn)行查看效果：
6.優(yōu)化代碼
我們可以發(fā)現(xiàn)不管是文本的使用還是組件的封裝，都存在著大量的魔法值，假如后續(xù)調(diào)整了語言字段，改動(dòng)將是巨大的，那么其實(shí)我們是可以正對映射關(guān)系封裝一個(gè)kv對象的：
// src\locales\LangMap.ts
export default {
/**key - value 形式關(guān)聯(lián)所有語言和對應(yīng)描述 */
languageMap: new Map([
["zhCn", "中文"],
["en", "English"],
]),
/**所有屬性路徑描述 */
app_title: 'app.title'
}
在helloWOrld中我們可以這樣調(diào)用
文章來源：http://www.zghlxwxcb.cn/news/detail-411401.html
我們調(diào)整語言切換組件文章來源地址http://www.zghlxwxcb.cn/news/detail-411401.html
<template>
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
{{ langMap.languageMap.get(currentLang) }}
<el-icon class="el-icon--right">
<arrow-down />
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :command="langEntry[0]" :key="langEntry[0]" :disabled="currentLang == langEntry[0]"
v-for="langEntry in langMap.languageMap.entries()">{{
langEntry[1] }}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
<script lang="ts" setup>
import { ArrowDown } from '@element-plus/icons-vue'
import { useI18n } from 'vue-i18n';
import { computed } from 'vue';
import langMap from '../locales/LangMap'
const i18n = useI18n()
// 計(jì)算屬性獲取i18n的值
const currentLang = computed(() => i18n.locale.value)
// 切換語言
function handleCommand(command: string) {
i18n.locale.value = command
}
</script>
<style scoped>
.example-showcase .el-dropdown-link {
cursor: pointer;
color: var(--el-color-primary);
display: flex;
align-items: center;
}
</style>
到了這里，關(guān)于electron+vue3全家桶+vite項(xiàng)目搭建【六】集成vue-i18n 國際化的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
