SpringBoot，或springcloud微服务项目前端Vue和后端java实现国际化

接到了一个国际银行的项目，有一个需求是要求实现国际化，像谷歌浏览器自带翻译那样，点按钮可以切换英文，繁体，中文来回切换这种效果，琢磨过之后找的资料最多的就是说用i18n，用i18n这个思路没问题，也很简单，下载i18n的插件，配置一下需要翻译的东西就好了，但是像后端的话就比较麻烦了，毕竟i18n也是要手动加要翻译的内容，而我们不可能每加一条数据就手动到配置文件里面加翻译内容的，先搞前端的翻译，然后再搞后端。

1.在src下面的main.js里面引入i18n

如图所示

注意，还是在同一个main.js里面加上i18n

2.配置我们刚刚在main.js里面要引入的index.js，然后在index.js里面引入i18n和要翻译的文件en_US,zh_CN,zh_TW。

index.js：

import Vue from "vue";
import VueI18n from "vue-i18n";
import enLocale from "./en_US";
import cnLocale from "./zh_CN";
import twLocale from "./zh_TW";
Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: localStorage.lang || "zh_CN",
  messages: {
    en_US: {
      ...enLocale
    },
    zh_CN: {
      ...cnLocale
    },
    zh_TW: {
      ...twLocale
    }
  }
});
export default i18n;

添加要翻译的文件：

中文zh_CN:

繁体zh_TW:

英文en_US:

注意，为了翻译同步，三份文件的内容要一样的意思，避免点击翻译的时候翻译内容对不上 。

然后我们随便到一个页面里看看怎么使用这三个翻译配置文件

这里解释一下，如果不是在分号里面需要加上{{}}，如果是在分号里面的话就不需要{{}} ，并且在标签前面加上：

为了方便，我们专门做一个头部页面，添加切换的按钮，如图：

changeLang方法如下图：添加按钮的时候，0代表中文，1代表英文，2代表繁体。

全部配置完成后，先要下载i18n

前端国际化翻译已经完成了，现在分析一下后端怎么做国际化比较方便呢？ 

我想到的有三种方案

第一种方案：可以像Vue这边这样干，在配置文件里面写死，但是这样干也是有局限，比如我新加一个功能，所有的配置又得加上我新加功能需要翻译的内容，非常麻烦，不可取。

第二种方案：在配置文件里面写死这个方案不可取，我们试着往数据库那边入手，翻译的内容放在数据库里会不会容易操作点呢，如果我们要翻译的内容在数据库里做好翻译，翻译的时候直接去数据库里查就方便多了，所以第二种方案我们可以在数据库里面设置三份表，一份存中文，一份存英文，一份存繁体，但是这样的话问题又来了，如果我表很多有一两百张表的话搞三份就得五六百张表了，所以这个方案也不太可行。

第三种方案：我们可以在表里选择性的加字段，如果需要在页面里展示要翻译的内容，我就加两个字段，一个存中文，一个存英文这样干就方便多了，代码也不会显得那么臃肿。

这样的时候我们只需要在前端页面那边，需要翻译的字段新增的时候就加上中文，英文，繁体都入库，修改的时候我们也在页面设置三个一起修改，这样又可以保持翻译内容的表达的意思都是一样的，查询的时候就全部查出来，让前端那边判断点切换的时候是哪种语言就让他展示哪个字段，所以第三种方案相比于另外两种更加的灵活。

如图所示，我们只需要在表里添加好字段，然后直接操作SQL就简单多了，下面是新增和查询的展示。

修改时的展示：

到这里，后端的国际化翻译也结束了。