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))
terminal取admin;language经normalizeBackendLanguage归一(如zh-CN → zh_CN、zh-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国际化修改》。
BizSpring