国际化配置

package.json

@@ -63,6 +63,7 @@
     "vue-barcode": "^1.3.0",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
+    "vue-i18n": "^8.27.0",
     "vue-ls": "4.0.0",
     "vue-meta": "2.4.0",
     "vue-plugin-hiprint": "^0.0.56",

src/i18n/index.js

+import Vue from "vue";
+import VueI18n from "vue-i18n";
+// 引入自定义语言
+import zh from "./lang/zh";
+import th from "./lang/th";
+// 引入element框架语言
+import ElementLocale from "element-ui/lib/locale";
+import thLocale from "element-ui/lib/locale/lang/th";
+import zhLocale from "element-ui/lib/locale/lang/zh-CN";
+
+ElementLocale.i18n((key, value) => i18n.t(key, value));
+Vue.use(VueI18n);
+// 准备翻译的语言环境信息
+const i18n = new VueI18n({
+  locale: localStorage.getItem("lang") || "zh", //将语言标识存入localStorage或sessionStorage中，页面刷新不会默认中文显示
+  messages: {
+    // 中文语言包
+    zh: {
+      ...zh,
+      ...zhLocale,
+    },
+    //英文语言包
+    th: {
+      ...th,
+      ...thLocale,
+    },
+  },
+  silentTranslationWarn: true, //解决vue-i18n黄色警告"value of key 'xxx' is not a string"和"cannot translate the value of keypath 'xxx'.use the value of keypath as default",可忽略
+  globalInjection: true, // 全局注入
+  fallbackLocale: "zh", // 指定的locale没有找到对应的资源或当前语种不存在时，默认设置当前语种为中文
+});
+
+export const langs = [
+    { value: 'zh-CN', label: '中文' },
+    { value: 'th-TH', label: 'ภาษาไทย' }
+]
+
+export const getLocaleText = (lang) => {
+    return langs.find(item => item.value == lang).label
+}
+
+export const setLocal = (lang) => {
+    localStorage.setItem('lang', lang)
+    i18n.locale = lang
+}
+
+export default i18n;
\ No newline at end of file

src/i18n/lang/th.js

+export default {
+  common: {
+    login: "login",
+    logining: 'logining'
+  },
+};

src/i18n/lang/zh.js

+export default {
+  common: {
+    login: "登 录",
+    logining: '登 录 中'
+  },
+};

src/main.js

@@ -24,7 +24,7 @@ import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";
 import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree, formatMoney } from "@/utils/ruoyi";
 window.store = store
-
+import i18n from './i18n'
 import TipLabel from '@/components/TipLabel/index.vue'
 import PageTitle from '@/components/Page/PageTitle.vue'
 import PageWrapper from '@/components/Page/PageWrapper.vue'
@@ -54,7 +54,9 @@ import VueMeta from 'vue-meta'
 import DictData from '@/components/DictData'
 import webSite from '@/config/website'
 Vue.prototype.website = webSite
-
+Vue.use(Element, {
+  i18n: (key, value) => i18n.t(key, value)
+})
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
@@ -113,5 +115,6 @@ new Vue({
   el: '#app',
   router,
   store,
+  i18n,
   render: h => h(App)
 })

src/store/modules/user.js

 import { login, logout, getInfo } from '@/api/login'
 import { getToken, setToken, removeToken } from '@/utils/auth'
-
+import {setLocal} from '@/i18n'
 const user = {
   state: {
     token: getToken(),
@@ -62,6 +62,9 @@ const user = {
           } else {
             commit('SET_ROLES', ['ROLE_DEFAULT'])
           }
+          if (user) {
+            user.locale ? setLocal(user.locale.substring(0, 2)) : 'zh'
+          }
           commit('SET_NAME', user.userName)
           commit('SET_AVATAR', avatar)
           commit('SET_USERID', user.userId)

src/views/system/user/profile/userInfo.vue

@@ -9,6 +9,20 @@
     <el-form-item label="邮箱" prop="email">
       <el-input v-model="user.email" maxlength="50" />
     </el-form-item>
+    <el-form-item label="语言" prop="locale">
+      <el-select
+        v-model="user.locale"
+        placeholder="请选择语言"
+        clearable
+      >
+        <el-option
+          v-for="dict in langs"
+          :key="dict.value"
+          :label="dict.label"
+          :value="dict.value"
+        />
+      </el-select>
+    </el-form-item>
     <el-form-item label="性别">
       <el-radio-group v-model="user.sex">
         <el-radio label="0">男</el-radio>
@@ -24,8 +38,9 @@
 
 <script>
 import { updateUserProfile } from "@/api/system/user";
-
+import { setLocal, langs } from '@/i18n'
 export default {
+  dicts: ['sys_lang'],
   props: {
     user: {
       type: Object
@@ -38,6 +53,9 @@ export default {
         nickName: [
           { required: true, message: "用户昵称不能为空", trigger: "blur" }
         ],
+        locale: [
+          { required: true, message: "语言不能为空", trigger: "blur" }
+        ],
         email: [
           { required: true, message: "邮箱地址不能为空", trigger: "blur" },
           {
@@ -54,7 +72,8 @@ export default {
             trigger: "blur"
           }
         ]
-      }
+      },
+      langs
     };
   },
   methods: {
@@ -63,6 +82,7 @@ export default {
         if (valid) {
           updateUserProfile(this.user).then(response => {
             this.$modal.msgSuccess("修改成功");
+            setLocal(this.user.locale.substring(0,2))
           });
         }
       });