SpringBoot+Vue前后端分离项目国际化支持

SpringBoot+Vue前后端分离项目国际化支持

一、前端国际化支持

1、安装i18n依赖

npm install --save [email protected]

2、src目录下面新建lang文件夹，新建i18n.js、language.en_US.js、language.zh_CN.js三个文件

i18n.js文件

import Vue from'vue'import VueI18n from'vue-i18n'import Cookies from'js-cookie'import elementEnLocale from'element-ui/lib/locale/lang/en'// element-ui langimport elementZhLocale from'element-ui/lib/locale/lang/zh-CN'// element-ui langimport enLocale from'./language.en_US'import zhLocale from'./language.zh_CN'

Vue.use(VueI18n)const messages ={en_US:{...enLocale,...elementEnLocale
  },zh_CN:{...zhLocale,...elementZhLocale
  }}const i18n =newVueI18n({// 设置语言 选项 en_US | zh_CNlocale: Cookies.get('language')||'zh_CN',// 通过this.$i18n.locale的值实现语言切换// 设置文本内容
  messages
})exportdefault i18n

language.en_US.js文件

exportdefault{login:{title:'Device Cloud Management System',logIn:'Log in',username:'Username',password:'Password'},//消息提示message:{setLanguageSuccess:"Set language success"},//菜单相关menus:{deviceManage:"Device Manage"}}

language.zh_CN.js文件

exportdefault{login:{title:'设备云管理系统',logIn:'登录',username:'账号',password:'密码'},//消息提示message:{setLanguageSuccess:"设置语言成功"},//菜单相关menus:{deviceManage:"设备管理"}}

3、在src/main.js中添加i18n

import i18n from"./lang/i18n";// use添加i18n
Vue.use(Element,{i18n:(key, value)=> i18n.t(key, value)})newVue({el:'#app',
  router,
  store,
  i18n,render:h=>h(App)})

4、在src/store/getters.js中添加language

const getters ={language:state=> state.app.language,}exportdefault getters

5、在src/store/modules/app.js中添加state–language

import Cookies from'js-cookie'const state ={language: Cookies.get('language')||'zh_CN'}const mutations ={SET_LANGUAGE:(state, language)=>{
    state.language = language
    Cookies.set('language', language)}}const actions ={setLanguage({ commit }, language){commit('SET_LANGUAGE', language)}}exportdefault{namespaced:true,
  state,
  mutations,
  actions
}

6、新建language.js文件，changeLanguages方法用于访问后端接口，修改语言

import request from'@/utils/request'/**
 * * 获取信息
 * @param address
 * @returns {AxiosPromise}
 */exportfunctionchangeLanguages(lang){returnrequest({url:'/changeLanguages',method:'get',headers:{isToken:false,},params:{lang: lang
    }})}

7、在src/components/LangSelect/index.vue中创建语言切换组件

<template><el-dropdown trigger="click"class="international" @command="handleSetLanguage"><div><svg-icon class-name="international-icon" icon-class="language"/></div><el-dropdown-menu slot="dropdown"><el-dropdown-item :disabled="language==='zh_CN'" command="zh_CN">
        中文
      </el-dropdown-item><el-dropdown-item :disabled="language==='en_US'" command="en_US">
        English
      </el-dropdown-item></el-dropdown-menu></el-dropdown></template><script>import{changeLanguages}from"../../api/system/language";import Cookies from"js-cookie";exportdefault{computed:{language(){returnthis.$store.getters.language
    }},methods:{handleSetLanguage(lang){this.$i18n.locale = lang
      this.$store.dispatch('app/setLanguage', lang)//请求后端，后端切换语言changeLanguages(lang).then(response=>{
        console.info("change-language:"+ lang);
        window.location.reload();this.$message({message:this.$t("message.setLanguageSuccess"),type:'success'})});}}}</script>

8、使用方式

普通文本使用方:{{$t('login.title')}}标签内使用方式：:placeholder="$t('login.password')"js内使用方式:this.$t('login.user.password.not.match')

二、后端国际化支持

1、添加I18nConfig配置文件

@ConfigurationpublicclassI18nConfigimplementsWebMvcConfigurer{@BeanpublicLocaleResolverlocaleResolver(){SessionLocaleResolver slr =newSessionLocaleResolver();//设置默认语言，中文
        slr.setDefaultLocale(Locale.SIMPLIFIED_CHINESE);return slr;}@BeanpublicLocaleChangeInterceptorlocaleChangeInterceptor(){LocaleChangeInterceptor lci =newLocaleChangeInterceptor();//参数名与前端changeLanguages方法携带参数名一致
        lci.setParamName("lang");return lci;}@OverridepublicvoidaddInterceptors(InterceptorRegistry registry){
        registry.addInterceptor(localeChangeInterceptor());}}

2、添加messages_en_US.properties和messages_zh_CN.properties文件

messages_en_US.properties文件

addSuccess=AddSuccess
#......

messages_zh_CN.properties文件

addSuccess=新增成功
#......

3、application.yml配置

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

4、新建controller文件，添加接口changeLanguages供给前端调用，修改语言使用

@RestControllerpublicclassLanguageController{@GetMapping("/changeLanguages")publicAjaxResultchangeLanguages(String lang){returnAjaxResult.success();}/**
     * 测试接口--后端根据前端设置的语言返回相应语言的文字 MessageUtils.message("addSuccess")
     * @return
     */@GetMapping("/test")publicAjaxResulttest(){returnAjaxResult.success(MessageUtils.message("addSuccess"));}}

5、MessageUtils.java文件

importorg.springframework.context.MessageSource;importorg.springframework.context.i18n.LocaleContextHolder;importcom.dcms.common.utils.spring.SpringUtils;publicclassMessageUtils{/**
     * 根据消息键和参数 获取消息 委托给spring messageSource
     * @param code 消息键
     * @param args 参数
     * @return 获取国际化翻译值
     */publicstaticStringmessage(String code,Object... args){MessageSource messageSource =SpringUtils.getBean(MessageSource.class);return messageSource.getMessage(code, args,LocaleContextHolder.getLocale());}}

三、异常报错处理

1、前端报错 in ./node_modules/vue-i18n/dist/vue-i18n.esm-bundler.js "export ‘Fragment’ was not found in ‘vue’

报错原因是：
    i18n版本太高了，与当前VUE版本不谦容；
解决：
    查看版本：npm view vue-i18n versions。选择其中一个低版本，不要太低的。
    我的项目vue版本是：2.6.14，选择的vue-i18n如下：npm install [email protected]