vue国际化步骤

前端改造部分

引入: vue-i18n相关包

npm i vue-i18n@8.27.0

当前vue项目2.6版本的,需要注意的是和最新的vue-i18n有冲突,别使用最新版本

src文件夹下创建一个国际化语言文件夹langurage,在文件夹下创建三个文件

en.js
zh.js
index.js

en.js

export default{
hbase_sys_page: {
_key: 'key(key)',
_id: 'id',
_value: 'value(value)',
_desc: 'describe',
_gengxinren: 'Updated by',
_chuangjianriqi: 'Created on',
_gengxinriqi: 'Update date',
_caozuo: 'operation',
} ,
hbase_sys_index:{
_management: 'configuration management',
_new: 'New',
_help: 'Help Information',
_prompt: ' Configuration center prompt (non developers are not allowed to operate this page);',
_non_repeatable: 'The key value is unique and cannot be repeated;',
_new_configuration: 'New Configuration',
_update_configuration: 'Modify Configuration',
}
}

zh.js

// 1、创建中文语言包对象
export default{
hbase_sys_page: {
_key: '键(key)',
_id: 'id',
_value: '值(value)',
_desc: '描述',
_gengxinren: '更新人',
_chuangjianriqi: '创建日期',
_gengxinriqi: '更新日期',
_caozuo: '操作',
} ,
hbase_sys_index:{
_management: '配置管理',
_new: '新建',
_help: '帮助信息',
_prompt: ' 配置中心提示(非开发人员请勿操作此页面);',
_non_repeatable: 'key值唯一不可重复;',
_new_configuration: '新建配置',
_update_configuration: '修改配置',
}
}

index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
// 从语言包文件中导入语言包对象
import zh from './zh.js'
import en from './en.js'
Vue.use(VueI18n)
const messages = {
zh,
en
}
const i18n = new VueI18n({
messages,
locale: 'en'
})
export default i18n

main.js 修改

import i18n from './langurage';
new Vue({
router,
store,
i18n,
render: (h) => h(App),
}).$mount('#app');
}

vue页面的相关改造

js部分

this.$t('key.value')

<script>
columns: [
{
title: this.$t('hbase_sys_page._id'),
width: 60,
dataIndex: 'id',
fixed: 'left',
align: 'left',
defaultSortOrder: 'descend',
sorter: (a, b) => a.id - b.id,
scopedSlots: { customRender: 'id' },
}]
</script>

vue模板部分

$t('key.value')

<div class="base-page">
<jmd-title :title="$t('hbase_sys_index._management')"></jmd-title>
<div class="base-form-wrap--search">
<base-form ref="baseFormRef"
@sure="getData"></base-form>
</div>

{{ $t('key.value') }}

<div class="table-operate-button-wrap">
<div class="table-operate-button-wrap-left">
<jmd-button type="custom" @click="openAddDrawer"
icon="iconfont-com icon-plus"> {{ $t('hbase_sys_index._new') }}
</jmd-button>
</div>
</div>
posted @   三号小玩家  阅读(82)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
Title
三号小玩家的 Mail: 17612457115@163.com, 联系QQ: 1359720840 微信: QQ1359720840

喜欢请打赏

扫描二维码打赏

支付宝打赏

点击右上角即可分享
微信分享提示