阅读 97 SEO

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

文章分类
代码人生
文章标签
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 gxwowoo@163.com 举报,一经查实,本站将立刻删除。
相关推荐