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

简介

记录一下，前端使用vue，后端使用若依（ruoyi，基于spring-boot）实现页面，后端返回提示信息国际化

前端

vue：2.6.12

vue-i18n：^8.27.2

安装vue-i18n，注：最新的交于该版本有差异，所以指定使用版本：8.27.2

npm install --save [email protected] --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文件

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

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

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