简介
记录一下,前端使用vue,后端使用若依(ruoyi,基于spring-boot)实现页面,后端返回提示信息国际化
前端
vue:2.6.12
vue-i18n:^8.27.2
安装vue-i18n,注:最新的交于该版本有差异,所以指定使用版本:8.27.2
npm install --save vue-i18n@8.27.2 --force
添加国际化js文件:language.en_US.js
export default {message: {"language": "language",}}
添加国际化js文件:language.zh_CN.js
export default {message: {"language": "语言",}};
添加i18n.js
import Vue from 'vue';import VueI18n from 'vue-i18n';import enLocale from '@/api/language/language.en_US'import usLocal from '@/api/language/language.zh_CN'// element-ui 组件国际化import ElementLocale from 'element-ui/lib/locale'import elementEnLocal from "element-ui/lib/locale/lang/en"import elementZhCNLocal from "element-ui/lib/locale/lang/zh-CN"ElementLocale.i18n((key, value) => i18n.t(key, value))Vue.use(VueI18n);const messages = {en_US: {...enLocale,...elementEnLocal},zh_CN: {...usLocal,...elementZhCNLocal}}const i18n = new VueI18n({locale: localStorage.getItem('lang') || 'zh_CN', // 通过this.$i18n.locale的值实现语言切换messages,});export default i18n;
main.js加载i18n.js
import i18n from "@/api/i18n"new Vue({el: '#app',router,i18n,store,render: h => h(App)})
添加vue文件,方便使用
import {isNotNull} from "@/api/default";import { changeLanguages } from "@/api/system/api";export default {name: "i18n",data(){return {lang: "cn",langList: [{label: "中文",value: "zh_CN"},{label: "English",value: "en_US"}],}},created() {let value = localStorage.getItem("lang");if (isNotNull(value)){this.lang = value;}},methods: {changeLanguage(value){this.$i18n.locale = value;localStorage.setItem("lang", value);changeLanguages(value).then(response => {console.info("change-language:" + value);window.location.reload();});},}}
changeLanguages,用于访问后端接口,修改语言
/** * * 获取信息 * @param address * @returns {AxiosPromise} */export function changeLanguages(lang){return request({url: '/changeLanguages',method: 'get',headers: {isToken: false,},params: {lang: lang}})}
使用方式:
#form中使用#导入import i18nSelect from "@/components/i18n/i18n"# 加载components: { i18nSelect }#script内使用:this.$t("message.language")
若依分离版后端
版本:3.8.4
添加:I18nConfig
package com.ruoyi.framework.config;import java.util.Locale;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.LocaleResolver;import org.springframework.web.servlet.config.annotation.InterceptorRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;import org.springframework.web.servlet.i18n.LocaleChangeInterceptor;import org.springframework.web.servlet.i18n.SessionLocaleResolver;/** * 资源文件配置加载 * * @author ruoyi */@Configurationpublic class I18nConfig implements WebMvcConfigurer{@Beanpublic LocaleResolver localeResolver(){SessionLocaleResolver slr = new SessionLocaleResolver();// 默认语言slr.setDefaultLocale(Locale.SIMPLIFIED_CHINESE);return slr;}@Beanpublic LocaleChangeInterceptor localeChangeInterceptor(){LocaleChangeInterceptor lci = new LocaleChangeInterceptor();// 参数名lci.setParamName("lang");return lci;}@Overridepublic void addInterceptors(InterceptorRegistry registry){registry.addInterceptor(localeChangeInterceptor());}}
添加接口:changeLanguages,只是提供给前端调用,修改语言使用
@GetMapping("/changeLanguages")public AjaxResult changeLanguages(String lang){return AjaxResult.success();}
添加:messages_en_US.properties
success=Success
添加:messages_zh_CN.properties
success=成功
application.yml配置,i18n/messages,表示在文件夹:resource/i18n下的messages_xx.properties文件,其中xx为Locale的信息,例如:Locale SIMPLIFIED_CHINESE,lang为:zh;country为:CN,所以对应的国际化文件为:messages_zh_CN.properties文件
# Spring配置spring:# 资源信息messages:# 国际化资源文件路径basename: i18n/messages
使用:使用:MessageUtils.message(“success”),来获取所需返回的信息即可,示例:
@GetMapping("/test")public AjaxResult test(){return AjaxResult.success(MessageUtils.message("success"));}