上一篇 《Vue3+TS i18n插件使用與配置》 文章缘眶，我們已經(jīng)有了一個 i18n.global.locale.value 參數(shù)嘱根，它可以設(shè)置和獲取當前語言，那么我們可以在NaiveUI 全局配置初始化的時候就賦值巷懈，這樣就能達到切換頁面中自定義文字語言時順帶切換UI組件語言该抒，這也就是為什么執(zhí)行setLanguage方法的時候會加重新加載頁面代碼了，如果有更好的實現(xiàn)方法可以在評論區(qū)回復砸喻，感謝柔逼！
在App.vue文件內(nèi)設(shè)置 NaiveUI 全局配置參數(shù)，包括自定義主題樣式割岛，默認語言等信息愉适。
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import { NConfigProvider, GlobalThemeOverrides, zhCN,enUS,dateZhCN,dateEnUS } from 'naive-ui'
import { reactive } from 'vue'
import i18n from "./i18n";
const languageDict = reactive({
"zh-CN": zhCN,
"en-US": enUS,
})
const dateLanguageDict = reactive({
"zh-CN": dateZhCN,
"en-US": dateEnUS,
})
// @ts-ignore: 這是官方的錯誤，本身現(xiàn)在它就是一個ComputedRefImpl類型的參數(shù)
const locale = languageDict[i18n.global.locale.value as keyof typeof languageDict]
// @ts-ignore
const dateLanguage = dateLanguageDict[i18n.global.locale.value as keyof typeof dateLanguageDict];
const themeOverrides: GlobalThemeOverrides = {
// 這里是主題配置信息
}
</script>
<template>
<n-config-provider :theme-overrides="themeOverrides" :locale="locale" :date-locale="dateLanguage">
<router-view ></router-view>
</n-config-provider>
</template>
<style lang="scss">
</style>
