vue3 i18n 设置国际化 语言切换
vue3 i18n 设置国际化 语言切换
·
1安装
npm install vue-i18n@next
2在src目录新建 locales-文件夹 (如下图)
3 basic 定义语言包
/**
* 所有英文 语言包
*/
export default {
login: 'Login',
}
4 helper – 提供 genMessage方法 获取指定文件夹下所有 对象
/**
* 提供 genMessage方法 获取指定文件夹下所有 对象
* basic:{ login: 'login' }
* basic2:{ login: 'login' }
* npm i lodash-es
*/
import { set } from 'lodash-es'
/**
* langs -- 存放 语言的 所有文件
* prefix -- 前缀 生成的对象最外键 = prefix 文件夹内文件
* en文件夹内 -- basic:{ login: 'login' }
*/
export function genMessage(langs, prefix = 'lang') {
const obj = {}
Object.keys(langs).forEach(key => {
const langFileModule = langs[key].default
let fileName = key.replace(`./${prefix}/`, '').replace(/^\.\//, '')
const lastIndex = fileName.lastIndexOf('.')
fileName = fileName.substring(0, lastIndex)
const keyList = fileName.split('/')
const moduleName = keyList.shift()
const objKey = keyList.join('.')
if (moduleName) {
if (objKey) {
// npm i lodash-es
// set(object, path, value)
set(obj, moduleName, obj[moduleName] || {})
set(obj[moduleName], objKey, langFileModule)
} else {
set(obj, moduleName, langFileModule || {})
}
}
})
return obj
}
5 en.js – 封装 英文 message对象
/**
* 封装 英文 message对象
* 外层为 messages:{ en:message:{}对象 }
*/
import antdLocale from 'ant-design-vue/es/locale/en_US'
import { genMessage } from '../helper'
const modules = import.meta.glob('./en/**/*.js', { eager: true })
export default {
message: {
antdLocale,
...genMessage(modules, 'en'),
},
}
6 setupI18n – 生成 i18n
/**
* 生成 i18n
* 使用 语言环境 后的对象
* zh_CN -- { t("从这里开始") }
*/
import { useLocale } from '@/stores/modules/localeStore'
import { storeToRefs } from 'pinia'
import { createI18n } from 'vue-i18n'
// 设置 国际化参数
const createI18nOptions = async () => {
// 获取语言环境
const localeStore = useLocale()
const { locale } = storeToRefs(localeStore)
// 获取 message对象
const defaultLocale = await import(`./lang/${locale.value}.js`)
const message = defaultLocale.default?.message ?? {}
return {
// setup中 使用 t ,则需要将其设置为false
legacy: false,
// template 使用 $t
// globalInjection: true,
locale: locale.value,
messages: {
[locale.value]: message,
},
}
}
/*
const messages = {
en: {
basic: {
login: 'login',
},
},
}
*/
export let i18n
export const setupI18n = async app => {
const options = await createI18nOptions()
i18n = createI18n(options)
app.use(i18n)
}
7 main 中 使用
// 国际化
import { setupI18n } from '@/locales/setupI18n'
// 引导启动
async function bootstrap() {
// 创建应用实例
const app = createApp(App)
app.use(pinia).use(router)
await setupI18n(app)
// 挂载应用
app.mount('#app')
}
bootstrap()
8 使用
js中
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
console.log(t('basic.login'))
locale.value = "zh_CN"
template 中
// 模版有返回 t
<div>{{ t('basic.login') }}</div>
// 直接使用
<div>{{ $t('basic.login') }}</div>
9 useLocale --语言切换
/**
* 语言切换 需要将全部语言提前添加 后续才可以切换
* 这里采用 切换哪个 添加哪个
* 1 语言数组 做选择
* 2 添加对应语言
* 3 同步修改 pinia
*
* export const i18n = createI18n(options)
* i18n.global === useI18n() = 18
* 18.availableLocales 多有语言包 名 数组
* 18.t 全局使用语言函数
* 18.setLocaleMessage(lang, message) 添加语种
* 18.locale.value 设置显示语种
*
*/
// import { unref } from 'vue'
import { useLocale } from '@/stores/modules/localeStore'
import { i18n } from './setupI18n'
export const useChangeLocale = async lang => {
// 全局对象 切换
const globalI18n = i18n.global
// const currentLocale = unref(globalI18n.locale)
// 要切换的语言 和 现在的相同
/* if (currentLocale === lang) {
return
} */
// 获取语言环境
const localeStore = useLocale()
const { localeArray, changeLocale } = localeStore
const defaultLocale = await import(`./lang/${lang}.js`)
const message = defaultLocale.default?.message ?? {}
if (!message) return
// 添加对应语言
globalI18n.setLocaleMessage(lang, message)
// 切换语种
globalI18n.locale.value = lang
// 语言池 中 包含 要修改的语言 就更新 pinia
// 就更新 pinia -- locale
if (localeArray.includes(lang)) {
setI18nLanguage(lang, changeLocale)
}
}
//
const setI18nLanguage = (lang, changeLocale) => changeLocale(lang)
// 导出 a-config-provider 组件所需的 locale -- antdLocale
export const antdLocale = async lang => {
const defaultLocale = await import(`./lang/${lang}.js`)
const locale = defaultLocale.default?.antdLocale ?? {}
return locale
}
10 pinia 缓存 语言变量 与切换语言修改
/**
* 国际化 缓存 设置 数据
*/
import { defineStore } from 'pinia'
import { reactive, ref } from 'vue'
export const useLocale = defineStore('locale', () => {
// 国际化 语言 环境
const locale = ref('en')
// 所支持的语言池 中文 英文
const localeArray = reactive(['zh_CN', 'en'])
const changeLocale = str => {
locale.value = str
}
// 返回
return { locale, localeArray, changeLocale }
})
11 切换语言
<!--
* @author wn
* @date 2023/02/27 11:14:27
* @description: 语言切换组件
!-->
<template>
<!-- v-model:value="$i18n.locale" -->
<a-space>
<a-select v-model:value="lang" style="width: 70px" @change="handleChange">
<a-select-option
v-for="(item, index) in localeArray"
:key="index"
:value="item"
>{{ item === 'zh_CN' ? '中文' : item }}
</a-select-option>
</a-select>
</a-space>
</template>
<script setup>
import { useLocale } from '@/stores/modules/localeStore'
import { storeToRefs } from 'pinia'
import { useChangeLocale } from '@/locales/useLocale'
import { ref } from 'vue'
const { locale, localeArray } = storeToRefs(useLocale())
// 默认语言
const lang = ref(locale.value)
// 点击切换语言
const handleChange = value => useChangeLocale(value)
</script>
<style scoped lang="less"></style>
12 Ant D 同步修改国际化
// useLocale 中 antdLocale
// App.vue
<template>
<a-config-provider :locale="lang">
<RouterView />
</a-config-provider>
</template>
<script setup>
// 导入 对应 组件所需的 locale
import { antdLocale } from '@/locales/useLocale'
import { useLocale } from '@/stores/modules/localeStore'
import { storeToRefs } from 'pinia'
import { watch, ref } from 'vue'
const { locale } = storeToRefs(useLocale())
// 根据 store 获得 对应 lang
// 切换语言的 同时 切换组件 国际化
const lang = ref('')
watch(
locale,
async newValue => {
lang.value = await antdLocale(newValue)
},
{ immediate: true }
)
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)