本篇内容主要讲解“vue3中怎么安装使用vue-i18n实时切换语言且不用刷新”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue3中怎么安装使用vue-i18n实时切换语言且不用刷新”吧!
计算
安全
数据库
网络和加速
企业服务
"vue": "^3.2.31",
"vue-i18n": "^9.2.0-beta.34",安装 npm install vue-i18n@next 这样装的最新版的才能在vue3.0使用
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'))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: '主页'
}
}<template>
// select 国际化的一个下拉框
</template>
<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { locale } = useI18n();
const handleChange = (value: Value) => {
// ...
// 这句话就是关键
locale.value = value.value
};
</script><template>
{{t('menu.home')}}
</template>
<script lang ="ts" setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n();
</script>到此，相信大家对“vue3中怎么安装使用vue-i18n实时切换语言且不用刷新”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://blog.csdn.net/mrhaoxiaojun/article/details/124082442
