国际化 Element-plus

同事在使用ElementPlus做国际化配置时,点击中英文切换按钮组件语言未切换,原因是代码中local写成固定值。实际上element-plus团队提供了全局用法,在app.vue文件添加代码,结合i18n响应赋值即可,提醒看文档要仔细。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近有同事问我说,elementPlus做国际化配置,但是点击中英文切换按钮之后,对应组件的中英文没有做切换。他的代码是这么写的

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

app.use(ElementPlus, {
  locale: zhCn,
})

local都写成固定的了,切换语言怎么可能生效。
查了查文档,实际上人家element-plus团队都提供了一个全局的用法,只需要在app.vue文件里加这么几行代码就行了。

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

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

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

  export default defineComponent({
    components: {
      ElConfigProvider,
    },
    setup() {
      return {
        locale: zhCn,
      }
    },
  })
</script>

中文的话,就使用中文的locale,英文的话,把locale的值改成对应英文的就好了~
点击切换按钮时进行响应赋值哈,这个一般都是结合i18n来使用,对应的切换语言操作就不赘述了。看文档还是要仔细一些,都写得很明白了其实。

### 配置Nuxt 3与Element Plus实现国际化 #### 安装依赖库 为了使Nuxt 3能够支持Element Plus以及其国际化特性,需先安装必要的依赖项。这包括`element-plus`及其图标库[@element-plus/icons-vue],还有专门针对Nuxt的插件`@element-plus/nuxt`[^2]。 ```bash pnpm add element-plus @element-plus/icons-vue @element-plus/nuxt -D ``` #### 修改配置文件 编辑项目的`nuxt.config.ts`来引入所需的模块和支持样式: ```typescript export default defineNuxtConfig({ modules: [ '@nuxtjs/style-resources', '@element-plus/nuxt' ], css:[ 'element-plus/dist/index.css', 'element-plus/theme-chalk/display.css' ] }) ``` 此部分操作确保了应用可以加载Element Plus的主题样式表,并启用了相应的Nuxt模块以增强框架的功能[^4]。 #### 设置多语言环境 对于Vue I18n的支持,可以在项目根目录创建一个新的JavaScript或TypeScript文件(如`locales.js|ts`),用来存储不同语言的消息资源对象。之后,在入口文件(main.ts/js)里初始化vue-i18n实例并注册全局组件属性$i18n以便于访问当前的语言设置[^3]。 ```javascript // locales/en-US.js export const messages = { message: { hello: "Hello world" } } ``` ```javascript import { createI18n } from 'vue-i18n'; const i18n = createI18n({ locale: process.env.VUE_APP_I18N_LOCALE || 'en-US', fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'zh-CN', messages: merge( require(`./locales/${process.env.VUE_APP_I18N_LOCALE}.json`), require('./locales/zh-CN.json') ) }); app.use(i18n); ``` #### 组件内部使用 当一切准备就绪后,在任何Vue单文件组件(SFCs)内可以通过调用$t()函数获取对应键名下的翻译字符串,或者利用内置指令v-t完成DOM节点的内容替换工作。同时也可以借助$localePath辅助方法构建带有特定区域参数的目标链接地址。 ```html <template> <div class="example"> <!-- 使用 $t 方法 --> <p>{{ $t('message.hello') }}</p> <!-- 或者 v-t 指令 --> <button v-t="'button.submit'"></button> </div> </template> <script setup lang="ts"> definePageMeta({ layout: false, }); useHead({ titleTemplate: (titleChunk) => { return titleChunk ? `${titleChunk} - My Website` : 'My Website'; }, }); </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

山楂树の

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值