Vue-i18N多语言配置与动态加载配置
一般情况下，我所理解的多语言，是指写死的静态结构里的文字，对这个进行多语言操作，比如一些固定的菜单、导航栏之类的，不涉及后台获取数据的部分，进行多语言。但由于公司产品以及老板对于技术理解程度和要求不同，于是需要进行动态化的多语言，下面先简单介绍一下开发的背景和需求，跳过看实现请下拉到最后。
项目是一套OA管理系统，前台的菜单以及导航以及各个组部件，均为后台控制名称，并且这个名称后台可以由用户自己修改，以B站导航为例，后台会存储菜单、导航栏里每一个模块的名称、对应的组件/部件号、识别编码，例如“首页”，同样都是这两个字，但是在不同的访问状态下，会对应不同的识别码，如公司访问，识别码是M01_01，那么角色访问就会变成M02_01，岗位M03_01等。并且由于中文的特殊性，同一个词在不同的语境下会有不同的含义，所以不能使用中文值作为KEY，因为会出现同一个中文，但对应不同英文的情况。
于是只能使用识别码来做KEY，虽然会有浪费，并且浪费的还很多，但目前还没有想到更好的解决方案，如果后续公司再有优化升级，我再回来更新。KEY的问题解决了，现在新的需求是，多语言支持用户自定义，由于有N家公司同时使用，所以要根据不同的公司加载不同的多语言文件， 且为了节省资源，公司目前采用的方案是动态生成多语言文件(因为并不是所有客户都会闲着无聊去改翻译。我可以不用，但你必须得有.jpg)，项目初始有中、英两个静态文件，如果用户修改了默认翻译，则生成对应公司的语言文件，且新生成的文件中，只有要覆盖的内容，如下：
代码实现部分
安装模块
根据你的需求选择：
在Src下的assets中创建locales存放多语言文件(打包时会被压缩到项目里，没有单独的文件)
在public下创建locales存放多语言文件(打包后文件保留，不会被压缩)
多语言文件可使用.JSON或.JS，区别如下图
然后再main.js或main.ts里添加引用，把插件装载到Vue里，如果文件在src下，最好使用@配置引用地址
切换语言直接修改locale值即可：
动态加载
在执行完后台接口取到了文件名后，把文件引入到项目，并赋值给I18N
