vue--国际化

最新vue3.0配套elementui组件国际化配置

　　

 

 

1.官网代码给出的两种解决方案，我只说我成功的第一种：

通过 ConfigProvider 的方式来使用，详细的使用方法请查阅 ConfigProvider 的文档

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

<script>
import { ElConfigProvider } from 'element-plus'

import zhCn from 'element-plus/lib/locale/lang/zh-cn'

defineComponent({
  components: {
    [ElConfigProvider.name]: ElConfigProvider,
  },
  data() {
    return {
      locale: zhCn,
    }
  },
})
</script>

 

2.很明显国际化不能做到页面层，要页面嵌套组件的方式

    <el-config-provider :locale="locale">
      <Yourprovide />
    </el-config-provider>
    
    import { ElConfigProvider } from 'element-plus';
  
     components: {
        [ElConfigProvider.name]: ElConfigProvider,
        Timeprovide,
      },

 

3.然后引入语言包，以中文为例，最后设置语言变量即可

import zhCn from 'element-plus/lib/locale/lang/zh-cn';
locale: zhCn,