vue3中安装使用vue-i18n实时切换语言且不用刷新
作者:mrhaoxiaojun
这篇文章主要介绍了vue3中安装使用vue-i18n实时切换语言不用刷新问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
我使用的版本
"vue": "^3.2.31", "vue-i18n": "^9.2.0-beta.34",
安装 npm install vue-i18n@next 这样装的最新版的才能在vue3.0使用
1、main.ts
import { createApp } from 'vue' import App from './App.vue' import router from './router' import { setupI18n } from '@/locales/setupI18n'; const app = createApp(App) // 使用国际化i18n app.use(setupI18n) router.isReady().then(() => app.mount('#app'))
2、locales
import { App } from 'vue'; import { createI18n } from 'vue-i18n' //引入vue-i18n组件 import { messages } from './config'; import globalConfig from '@/config/index' let {setting:{lang:defaultLang}} = globalConfig //注册i8n实例并引入语言文件 const localeData = { legacy: false, // 使用CompotitionAPI必须添加这条. locale: defaultLang, messages, // 一个语言包对象,简单 globalInjection: true } // setup i18n instance with glob export const setupI18n = { install (app: App) { const i18n = createI18n(localeData) app.use(i18n); } }
config文件
import zh from './language/zh' import en from './language/en' // i18n本地语言包 export const messages = { 'zh-CN': zh, 'en-US': en } ------------------------- // zh文件,en同理 export default { menu: { home: '主页' } }
3、国际化切换
<template> // select 国际化的一个下拉框 </template> <script lang="ts" setup> import { useI18n } from 'vue-i18n' const { locale } = useI18n(); const handleChange = (value: Value) => { // ... // 这句话就是关键 locale.value = value.value }; </script>
4、最后使用
<template> {{t('menu.home')}} </template> <script lang ="ts" setup> import { useI18n } from 'vue-i18n' const { t } = useI18n(); </script>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。