简介
记录一下，前端使用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文件，方便使用
<template>
<div>
<el-select style="width: 100%" @change="changeLanguage" v-model="lang">
<el-option v-for="lan in langList"
:key="lan.value"
:label="lan.label"
:value="lan.value">
</el-option>
</el-select>
</div>
</template>
<script>
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();
});
},
}
}
</script>
changeLanguages，用于访问后端接口，修改语言
/**
* * 获取信息
* @param address
* @returns {AxiosPromise}
*/
export function changeLanguages(lang){
return request({
url: '/changeLanguages',
method: 'get',
headers: {
isToken: false,
},
params: {
lang: lang
}
})
}使用方式：
#form中使用
<el-form-item class="mb-3" prop="lang" :label="$t('message.language')">
<i18n-select></i18n-select>
</el-form-item>
#导入
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
*/
@Configuration
public class I18nConfig implements WebMvcConfigurer
{
@Bean
public LocaleResolver localeResolver()
{
SessionLocaleResolver slr = new SessionLocaleResolver();
// 默认语言
slr.setDefaultLocale(Locale.SIMPLIFIED_CHINESE);
return slr;
}
@Bean
public LocaleChangeInterceptor localeChangeInterceptor()
{
LocaleChangeInterceptor lci = new LocaleChangeInterceptor();
// 参数名
lci.setParamName("lang");
return lci;
}
@Override
public 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文件文章来源：https://www.toymoban.com/news/detail-532102.html
# Spring配置
spring:
# 资源信息
messages:
# 国际化资源文件路径
basename: i18n/messages使用：使用：MessageUtils.message("success")，来获取所需返回的信息即可，示例：文章来源地址https://www.toymoban.com/news/detail-532102.html
@GetMapping("/test")
public AjaxResult test(){
return AjaxResult.success(MessageUtils.message("success"));
}到了这里，关于vue 前端 + 若依（ruoyi）后端 实现国际化的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
