vue3 + element-plus組件的國際化

1、首先官網是這樣說明的：

---

vue版本：3.2.26
element-plus版本：2.0.2

然后我在main.js中也這樣寫了

於是乎在項目沒生效

我只能說官方的文檔能不能細心點～～·

---

2、使用ElConfigProvider全局配置組件

---

在app.vue中使用組件

<template>
  <el-config-provider :locale="locale">
    <router-view />
  </el-config-provider>
  
</template>

<script>
import {ref, watch, computed} from 'vue'
import {useStore} from 'vuex'
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
import enLocale from 'element-plus/lib/locale/lang/en'
import {observeSwitchLang} from './utils/i18n'
import {GET_USER_INFO, WINDOW_WIDTH, HANDLE_COLLAPSE} from './utils/constant'
import {generateNewStyles, appendStyles} from './utils/theme'
import useWindowSize from './hooks/useWindowSize'

export default {
  setup() {
    const locale = ref(zhLocale)
    const store = useStore()
    const {width} = useWindowSize()

    const lang = computed(() => store.getters.language)

    /* 處理刷新后主題色重置的問題 */
    generateNewStyles(store.getters.themeColor)
    .then(newStyle => appendStyles(newStyle))
    
    watch(width, newWidth => {
      if (newWidth <= WINDOW_WIDTH) {
        store.commit(HANDLE_COLLAPSE, false)
      } else {
        store.commit(HANDLE_COLLAPSE, true)
      }
    })
    watch(lang, newLang => {
      locale.value = newLang === 'zh' ? zhLocale : enLocale
    })
    observeSwitchLang(() => {
      store.getters.token && store.dispatch(GET_USER_INFO)
    })

    return {locale}
  }
}
</script>

這下子就可以了