Skip to content
大纲

I18n国际化在 Element 中使用

一、properties 配置文件示例

bizspring-upms/src/main/resources/language/common/message_zh_CN.properties(值须 \uXXXX 转义):

properties
common_search=搜索
common_add=添加
common_status=状态
MemberLevel_name=名称

二、多语言加载(src/api/i18n.js

管理端启动 / 切换语言时,从后端按 terminal + language 拉取合并后的文案 JSON,存入 sessionStorage.messages

javascript
import request from '@/router/axios'
import { normalizeBackendLanguage } from '@/util/i18nLocale'

export const loadLanguage = (terminal, language) => {
  return request({
    url: '/i18n/message',
    headers: { isToken: false, Authorization: 'Basic ' + base64Credentials }, // Base64(client_id:client_secret),见交付配置
    method: 'post',
    params: { terminal, language: normalizeBackendLanguage(language) },
  })
}

拉取成功后写入 sessionStorage:

javascript
const messages = response.data.data.i18n
sessionStorage.setItem('messages', JSON.stringify(messages))

terminaladminlanguagenormalizeBackendLanguage 归一(如 zh-CN → zh_CNzh-TW → zh_TW)。

三、页面调用

data() 中一次性读入 message

javascript
export default {
  data() {
    const message = JSON.parse(sessionStorage.getItem('messages')) || {}
    return {
      message,
      loading: true,
      // ...
    }
  }
}

四、Element Plus 中使用

html
<el-button type="primary" @click="handleQuery">{{ message['common_search'] }}</el-button>
<el-form-item :label="message['MemberLevel_name']" prop="name">
  <el-input v-model="form.name" :placeholder="message['common_input'] + ' ' + message['MemberLevel_name']" />
</el-form-item>

校验 rules / 交互提示同样取 message

javascript
rules: { name: [{ required: true, message: message['common_input'] + ' ' + message['MemberLevel_name'], trigger: 'blur' }] }
// this.$confirm(this.message['common_confirmDeletion'], this.message['common_tip'], { type: 'warning' })
// this.msgSuccess(this.message['common_add'] + ' ' + this.message['common_success'])

逐页改造清单与 key 命名规范见《I18n国际化修改》。

版权许可