外包公司接到了一个新加坡绿联国际银行的项目，有一个需求是要求实现国际化，像谷歌浏览器自带翻译那样，点按钮可以切换英文，繁体，中文来回切换这种效果，琢磨过之后找的资料最多的就是说用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就简单多了，下面是新增和查询的展示。
修改时的展示：
到这里，后端的国际化翻译也结束了，其实都不是很难，只要理清思路自己要干什么，然后想办法一步一步实现就好了。