简介

记录一下，前端使用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"));}