jeecg 国际化实现（前端部分：菜单+业务层面）

我所负责的项目是服务于多国家的，便有了国际化这一需求，以我自己项目为例，为大家详细介绍jeecg如何实现前端部分的国际化。

一、需求

页面上要有个切换语种的下拉框，并且每次切换后，下次在登陆进来要默认显示上次切换过的，由于每次切换后，部分内容翻译不完全，所以每次切换我都进行了页面刷新：location.reload()

看到评论区有同行问关于菜单的问题，就在这里补充一下，以上所说的部分内容翻译不完全所指的便是菜单了，因为菜单数据是后端接口（sys/permission/getUserPermissionByToken）返回的。这里可以给大家说一下我们团队当时的解决办法：

前端项目结构里的\src\store\modules\user.js这个文件，获取菜单信息的queryPermissionsByUser请求里多加一个语种参数给后端，每次前端切换语种之后刷新页面都会重新进到这个请求，后端收到请求之后会根据前端给到的语种参数来返回当前设定的语种相关的菜单。

二、官方文档参考

jeecg国际化改造方案：国际化改造方案 · JeecgBoot 开发文档 · 看云

UI组件国际化说明：https://www.antdv.com/docs/vue/i18n-cn/

三、业务需求部分的国际化

1）、安装i18n（可以看一下自己的package.json文件里有没有i18n，不出意外的话，Jeecg有）

      npm install vue-i18n

2）、创建js语种文件

     一般是在 src/components/lang/ 中 创建语言js:en-US.js 和 zh-CN.js,个人觉得json格式比js严谨，所以我用的json，这个看个人习惯了~

   

{
  "textPrompt":{
    "fillIn":"Please fill in"
   },
  "language":"Language",
  "button":{
    "searchQuery":"Search"
  }
}

如果习惯用js：

export default{
  "textPrompt":{
        "fillIn":"Please fill in"
   },
  "language":"Language",
  "button":{
    "searchQuery":"Search"
  }
}

3&