SpringBoot+Vue前后端分离项目国际化支持_springboot配合vue实现中日英页面文字切换

一、前端国际化支持

1、安装i18n依赖

npm install --save vue-i18n@8.27.2 --force
1

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 lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import 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 = new VueI18n({
  // 设置语言 选项 en_US | zh_CN
  locale: Cookies.get('language') || 'zh_CN', // 通过this.$i18n.locale的值实现语言切换
  // 设置文本内容
  messages
})

export default i18n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

language.en_US.js文件

export default {
  login: {
    title: 'Device Cloud Management System',
    logIn: 'Log in',
    username: 'Username',
    password: 'Password'
  },
  //消息提示
  message:{
    setLanguageSuccess:"Set language success"
  },
  //菜单相关
  menus:{
    deviceManage:"Device Manage"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

language.zh_CN.js文件

export default {
  login: {
    title: '设备云管理系统',
    logIn: '登录',
    username: '账号',
    password: '密码'
  },
  //消息提示
  message:{
    setLanguageSuccess:"设置语言成功"
  },
  //菜单相关
  menus:{
    deviceManage:"设备管理"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

import i18n from "./lang/i18n";

// use添加i18n
Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value)
})
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})
1
2
3
4
5
6
7
8
9
10
11
12
13

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

const getters = {
  language: state => state.app.language,
}
export default getters
1
2
3
4

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)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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

import request from '@/utils/request'

/**
 * * 获取信息
 * @param address
 * @returns {AxiosPromise}
 */
export function changeLanguages(lang){
  return request({
    url: '/changeLanguages',
    method: 'get',
    headers: {
      isToken: false,
    },
    params: {
      lang: lang
    }
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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";
export default {
  computed: {
    language() {
      return this.$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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

8、使用方式

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

二、后端国际化支持

1、添加I18nConfig配置文件

@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();
        //参数名与前端changeLanguages方法携带参数名一致
        lci.setParamName("lang");
        return lci;
    }

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(localeChangeInterceptor());
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

messages_en_US.properties文件

addSuccess=Add Success
#......
1
2

messages_zh_CN.properties文件

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

3、application.yml配置

# Spring配置
spring:
  # 资源信息
  messages:
    # 国际化资源文件路径
    basename: i18n/messages
1
2
3
4
5
6

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

@RestController
public class LanguageController {

    @GetMapping("/changeLanguages")
    public AjaxResult changeLanguages(String lang) {
        return AjaxResult.success();
    }

    /**
     * 测试接口--后端根据前端设置的语言返回相应语言的文字 MessageUtils.message("addSuccess")
     * @return
     */
    @GetMapping("/test")
    public AjaxResult test(){
        return AjaxResult.success(MessageUtils.message("addSuccess"));
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

5、MessageUtils.java文件

import org.springframework.context.MessageSource;
import org.springframework.context.i18n.LocaleContextHolder;
import com.dcms.common.utils.spring.SpringUtils;

public class MessageUtils
{
    /**
     * 根据消息键和参数 获取消息 委托给spring messageSource
     * @param code 消息键
     * @param args 参数
     * @return 获取国际化翻译值
     */
    public static String message(String code, Object... args)
    {
        MessageSource messageSource = SpringUtils.getBean(MessageSource.class);
        return messageSource.getMessage(code, args, LocaleContextHolder.getLocale());
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

三、异常报错处理

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 vue-i18n@8.23.0
1
2
3
4
5