vue3使用vue-i18n(vue3使用typescript)
安装
npm i vue-i18n@next 复制代码
配置
// locales/i18n.ts import { createI18n } from 'vue-i18n' const messages = { en: { message: { hello: 'hello world' } }, ja: { message: { hello: 'こんにちは、世界' } } } const i18n = createI18n({ // legacy: false, // globalInjection: true, locale: 'ja', messages }) export default i18n 复制代码// main.ts import i18n from 'locales/i18n' const app = createApp(App) app.use(i18n) 复制代码
使用
在ts文件中使用
import i18n from 'locales/i18n' import { ElMessage } from 'element-plus' export async function doTest() { ElMessage({ message: i18n.global.t('message.hello') }) console.log(i18n.global.t('message.hello')) } 复制代码在vue文件中使用
<script lang="ts" setup> const { t, locale } = useI18n() console.log('i18n', t('message.hello')) function onChangeLocale(lang:string ='en') { locale.value = lang } </script> <template> <button @click='onChangeLocale'>语言切换</button> {{ $t("message.hello") }} </template> 复制代码加载远程国际化数据
import { nextTick } from 'vue' import { createI18n } from 'vue-i18n' export const SUPPORT_LOCALES = ['en', 'ja'] export function setupI18n(options = { locale: 'en' }) { const i18n = createI18n(options) setI18nLanguage(i18n, options.locale) return i18n } export function setI18nLanguage(i18n, locale) { if (i18n.mode === 'legacy') { i18n.global.locale = locale } else { i18n.global.locale.value = locale } /** * NOTE: * If you need to specify the language setting for headers, such as the `fetch` API, set it here. * The following is an example for axios. * * axios.defaults.headers.common['Accept-Language'] = locale */ document.querySelector('html').setAttribute('lang', locale) } export async function loadLocaleMessages(i18n, locale) { // load locale messages with dynamic import const messages = await import( /* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json` ) // set locale and locale message i18n.global.setLocaleMessage(locale, messages.default) return nextTick() }
作者：悟空和大王
链接：https://juejin.cn/post/7029609093539037197