参考:https://blog.csdn.net/qq727013465/article/details/117264460
当前版本: jeecgboot 2.4.6
需求: 中文 繁体中文 英文
切换语言:
修改 components/setting/SettingDrawer.vue
<!-- 增加下拉选择框 -->
<a-list-item>
<a-list-item-meta>
<div slot="title">语言设置</div>
</a-list-item-meta>
<a-select size="small" style="width: 80px;" :defaultValue="$t('langValue')" @change="handleLanguageChange">
<a-select-option value="zh-CN">中文</a-select-option>
<a-select-option value="zh-TW">繁体中文</a-select-option>
<a-select-option value="en-US">English</a-select-option>
</a-select>
</a-list-item>
//script 中的 methods 里增加 handleLanguageChange 切换语言的事件
handleLanguageChange(lang){
//this.$i18n.locale = lang; //改变当前语言 动态无感 切换,,但是有部分内容 不生效,估计我
this.$ls.set("language", lang);//将lang 语言存在localStorage里,
//本来想做成,页面不刷新语言自动切换,但是效果不理想,有的内容切换不成功,于是就 做刷新页面操作,这里只缓存语言
window.location.reload()
}
组件国际化:
修改 App.vue 文件
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import enUS from 'ant-design-vue/lib/locale-provider/en_US'
import enquireScreen from '@/utils/device'
export default {
data () {
return {
locale: zhCN,
}
},
created () {
let that = this
enquireScreen(deviceType => {
// tablet
if (deviceType === 0) {
that.$store.commit('TOGGLE_DEVICE', 'mobile')
that.$store.dispatch('setSidebar', false)
}
// mobile
else if (deviceType === 1) {
that.$store.commit('TOGGLE_DEVICE', 'mobile')
that.$store.dispatch('setSidebar', false)
}
else {
that.$store.commit('TOGGLE_DEVICE', 'desktop')
that.$store.dispatch('setSidebar', true)
}
})
//获取本地缓存中的语言配置,并切换
let language = this.$ls.get("language");
if( language == 'zh-CN'){
this.locale = zhCN
} else if(language == 'en-US'){
this.locale = enUS
}
}
}
页面文案国际化
(1) 安装 vue-i18n:
npm install vue-i18n
(2) 在 src/components/lang/ 中创建语言js, en-US.js 、 zh-CN.js 和zh-TW.js
// en-US.js
export default {
langValue: 'en-US',
lang: 'English',
age:'age',
sex:'sex',
welcome:'welcome',
sexText:{
typeDict:{
'1': 'female',
'2': 'male',
'null':''
}
},
}
// zh-CN.js
export default {
langValue: 'zh-CN',
lang: '中文',
age:'年龄',
sex:'性别',
welcome:'欢迎您',
sexText:{
typeDict:{
'1': '女',
'2': '男',
'null':''
}
},
}
// zh-CN.js
export default {
langValue: 'zh-TW',
lang: '繁体中文',
age:'年龄',
sex:'性别',
welcome:'欢迎您',
sexText:{
typeDict:{
'1': '女',
'2': '男',
'null':''
}
}
}
(3) 在main.js实例化组件
//i18n设置
import VueI18n from 'vue-i18n'
import enLocale from '@/components/lang/en-US'
import zhLocale from '@/components/lang/zh-CN'
import twLocale from '@/components/lang/zh-TW'
Vue.use(VueI18n)
// 注册i18n实例并引入语言文件,文件格式等下解析
const messages = {
'en-US': {
...enLocale,
},
'zh-CN': {
...zhLocale,
},
'zh-TW': {
...twLocale,
}
}
const i18n = new VueI18n({
locale: Vue.ls.get("language", "zh-CN"),
messages
})
SSO.init(() => {
main()
})
function main() {
new Vue({
router,
store,
i18n, //此处添加
mounted () {
store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
},
render: h => h(App)
}).$mount('#app')
}
在组件中这样使用
<template>
<div>
{{ $t('lang') }}
</div>
</template>
welcome: "你好,{name}"
页面组件中这样使用:
<template>
<div>
{{ $tc('welcome', {'name':'jeecg' }) }}
</div>
</template>
页面输出 : 你好,jeecg
$t(path, locale, option) // text 文本替换,locale可单独设置语言,option可传参数替换模板
$tc(path, choice, locale, option) // text+choice 比$t多一个choice,可以选择模板内容(模板内容间用 | 分隔,如 香蕉|苹果|梨,最多只能使用三个选项,下标从0开始,当选项为2个时下标从1开始~~)
$te(path) // text+exist 判断当前语言包中path是否存在
$d(number|Date, path, locale) // date 时间格式化
$n(number, path, locale) // number 数字格式化(货币等)
// 更多细节参考官方文档:https://kazupon.github.io/vue-i18n/api/#vue-injected-methods
如果某些js中含有字符需要切换语言(包括rules),需要写在computed中。
computed: {
rules1 () {
return {
username: [
{required: true, message: this.$t('username.required'), trigger: 'blur'}
]
}
}
}
菜单以及数据库业务
创建数据字段翻译表sys_translate,可以扩展语种
src\store\modules\user.js 获取用户信息时获的翻译配置并缓存
Vue.ls.set(UI_CACHE_TRANSLATE_DATA, response.result.sysTranslateItems, 7 * 24 * 60 * 60 * 1000)
api/api.js 添加公共方法读取多语言结果
//从缓存中获取多语言配置
/*
tableName: 关联表名
id: 关联ID
language: 语种
defaultValue: 未配置时返回默认值
*/
function getTranslateItemsFromCache(tableName,id,language,defaultValue) {
let translateItems = Vue.ls.get(UI_CACHE_TRANSLATE_DATA);
let res = defaultValue;
//翻译
translateItems.some(function(item){
if(item.relateTable == tableName && item.relateId == id){
if( language == 'zh-CN'){
res = item.chinese;
} else if(language == 'en-US'){
res = item.english;
} else if(language == 'zh-TW'){
res = item.taiwan;
}
return true;
}
});
return res;
}
菜单切换语言
//获取缓存语种
let language = Vue.ls.get("language");
menuData.forEach((item, index) => {
let temp = getTranslateItemsFromCache('sys_permission',item["id"],language,'')
if(temp!=''){
item["meta"].title = temp;
}
if (item["children"]) {
let hasChildrenMenu = item["children"].filter((i) => {
let temp1 = getTranslateItemsFromCache('sys_permission',i["id"],language,'')
if(temp1!='') {
i["meta"].title = temp1;
}
return !i.hidden || i.hidden == false
})
if (hasChildrenMenu == null || hasChildrenMenu.length == 0) {
item["hidden"] = true
}
}
})
效果
翻译表维护界面
核心代码
@Override
public List<Map<String, String>> queryAllList(SysTranslateVO sysTranslateVo) {
if(sysTranslateVo.getRelateTable()!=null&&!sysTranslateVo.getRelateTable().equals("")){
String cloumnName = "";
if(sysTranslateVo.getRelateTable().equals("testad")){
cloumnName = "text";
}else if(sysTranslateVo.getRelateTable().equals("sys_permission")){
cloumnName = "name";
} else if(sysTranslateVo.getRelateTable().equals("sys_role")) {
cloumnName = "role_name";
}
if(!StringUtils.isEmpty(sysTranslateVo.getKeyword())){
return sysTranslateMapper.queryAllListByKeyword(sysTranslateVo.getRelateTable(),cloumnName,sysTranslateVo.getKeyword());
}
return sysTranslateMapper.queryAllList(sysTranslateVo.getRelateTable(),cloumnName);
}
return null;
}
//通过表名+字段名查询多语言配置
@Deprecated
@Select("select t.id as \"relateId\",\"${table}\" as \"relateTable\",t.${key} as \"text\",s.id,s.chinese,s.taiwan,s.english " +
" from ${table} t left join sys_translate s on s.relate_id =t.id and s.relate_table = \"${table}\"")
public List<Map<String, String>> queryAllList(@Param("table") String table, @Param("key") String key);
//通过表名+字段名+关键字查询多语言配置
@Deprecated
@Select("select t.id as \"relateId\",\"${table}\" as \"relateTable\",t.${key} as \"text\",s.id,s.chinese,s.taiwan,s.english " +
" from ${table} t left join sys_translate s on s.relate_id =t.id and s.relate_table = \"${table}\" where t.${key} like \"%${keyword}%\"")
public List<Map<String, String>> queryAllListByKeyword(@Param("table") String table, @Param("key") String key,@Param("keyword") String keyword);