vue 前端 + 若依（ruoyi）后端 实现国际化

简介

记录一下，前端使用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 */@Configurationpublic 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文件

# Spring配置spring:  # 资源信息  messages:    # 国际化资源文件路径    basename: i18n/messages

使用：使用：MessageUtils.message("success")，来获取所需返回的信息即可，示例：

    @GetMapping("/test")    public AjaxResult test(){        return AjaxResult.success(MessageUtils.message("success"));    }