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>
---------------------------------------------------------------------------
国之殇,未敢忘!
南京大屠杀!
731部队!
(有关书籍《恶魔的饱食》)以及核污染水排海等一系列全无人性的操作,购买他们的食品和为它们提供帮助只会更加变本加厉的害你,呼吁大家不要购买日本相关产品
昭昭前事,惕惕后人
吾辈当自强,方使国不受他人之侮!
---------------------------------------------------------------------------
作者:三号小玩家
出处:https://www.cnblogs.com/q1359720840/
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。 版权信息
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库