brx lang

nladmin-ui/src/api/i18n.js

@@ -0,0 +1,19 @@
+// import axios from 'axios'
+
+// export function fetchMessages(locale) {
+//   return axios.get(`/api/i18n/${locale}`).then(response => {
+//     return response.data
+//   })
+// }
+
+import request from '@/utils/request'
+
+export function fetchMessages(locale) {
+  return request({
+    url: 'api/i18n',
+    method: 'post',
+    data: locale
+  })
+}
+
+export default { fetchMessages }

nladmin-ui/src/i18n/i18n.js

@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+Vue.use(VueI18n)
+
+// 准备默认的语言环境消息（可以是空对象，也可以是一些基本消息）
+const defaultLocale = 'en'
+const fallbackLocale = 'en'
+
+// 创建i18n实例
+const i18n = new VueI18n({
+  locale: defaultLocale, // 设置当前语言
+  fallbackLocale, // 设置回退语言
+  messages: {} // 初始化为空，稍后从接口获取
+})
+
+export default i18n

nladmin-ui/src/i18n/index.js

@@ -1,27 +1,44 @@
+// import Vue from 'vue'
+// import VueI18n from 'vue-i18n'
+// import locale from 'element-ui/lib/locale'
+// import zh from './langs/chinese'
+// import en from './langs/english'
+// import indonesian from './langs/indonesian'
+// Vue.use(VueI18n)
+// const messages = {
+//   en: {
+//     ...en
+//   },
+//   zh: {
+//     ...zh
+//   },
+//   in: {
+//     ...indonesian
+//   }
+// }
+// const i18n = new VueI18n({
+//   locale: localStorage.lang || 'zh',
+//   messages,
+//   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.i18n((key, value) => i18n.t(key, value))
+// export default i18n
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
-import locale from 'element-ui/lib/locale'
-import zh from './langs/chinese'
-import en from './langs/english'
-import indonesian from './langs/indonesian'
+
 Vue.use(VueI18n)
-const messages = {
-  en: {
-    ...en
-  },
-  zh: {
-    ...zh
-  },
-  in: {
-    ...indonesian
-  }
-}
+
+// 准备默认的语言环境消息（可以是空对象，也可以是一些基本消息）
+const defaultLocale = 'en'
+const fallbackLocale = 'en'
+
+// 创建i18n实例
 const i18n = new VueI18n({
-  locale: localStorage.lang || 'zh',
-  messages,
-  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: defaultLocale, // 设置当前语言
+  fallbackLocale, // 设置回退语言
+  messages: {} // 初始化为空，稍后从接口获取
 })
-locale.i18n((key, value) => i18n.t(key, value))
+
 export default i18n

nladmin-ui/src/main.js

@@ -50,6 +50,11 @@ import { getValueByCode } from '@/views/system/param/param'
 import VueBus from 'vue-bus'
 // 引入i18
 import i18n from './i18n'
+// add-xy start
+import { fetchMessages } from '@/api/i18n' // 有一个API模块来获取语言文件
+// 当前语言，可以从本地存储、用户设置或URL参数中获取
+const currentLocale = localStorage.getItem('lang')
+// add-xy end
 
 LogicFlow.use(Menu)
 
@@ -100,3 +105,20 @@ new Vue({
   i18n,
   render: h => h(App)
 })
+
+// add-xy start
+// 异步获取语言文件
+fetchMessages(currentLocale).then(messages => {
+  // 将获取到的消息设置到i18n实例
+  i18n.setLocaleMessage(currentLocale, messages)
+  // 设置当前语言
+  i18n.locale = currentLocale
+  // new Vue({
+  //   el: '#app',
+  //   router,
+  //   store,
+  //   i18n,
+  //   render: h => h(App)
+  // })
+})
+// add-xy end

nladmin-ui/src/views/login.vue

@@ -28,7 +28,8 @@
           </el-checkbox>
         </el-col>
         <el-col :span="12">
-          <el-dropdown style="display: flex; justify-content: right; color: #409EFF;" trigger="click" @command="langChange">
+          <!-- <el-dropdown style="display: flex; justify-content: right; color: #409EFF;" trigger="click" @command="langChange"> -->
+          <el-dropdown style="display: flex; justify-content: right; color: #409EFF;" trigger="click" @command="changeLanguage">
             <span class="el-dropdown-link">
               {{ language }}
             </span>
@@ -59,10 +60,11 @@
 <script>
 import { encrypt } from '@/utils/rsaEncrypt'
 import Config from '@/settings'
-import { getCodeImg } from '@/api/login'
+// import { getCodeImg } from '@/api/login'
 import Cookies from 'js-cookie'
 import Background from '@/assets/images/background.jpg'
 import i18n from '@/i18n'
+import { fetchMessages } from '@/api/i18n'
 export default {
   name: 'Login',
   data() {
@@ -107,6 +109,18 @@ export default {
     this.point()
   },
   methods: {
+    // 语言切换-x
+    async changeLanguage(locale) {
+      // 如果已经加载过该语言，可以直接设置，避免重复请求
+      if (!this.$i18n.getLocaleMessage(locale)) {
+        const messages = await fetchMessages(locale)
+        this.$i18n.setLocaleMessage(locale, messages)
+      }
+      this.$i18n.locale = locale
+      // 可以将当前语言保存到本地存储，以便下次使用
+      localStorage.setItem('lang', locale)
+      this.setLang(locale)
+    },
     // 中英文切换
     langChange(command) {
       this.$i18n.locale = command
@@ -124,10 +138,10 @@ export default {
       }
     },
     getCode() {
-      getCodeImg().then(res => {
-        this.codeUrl = res.img
-        this.loginForm.uuid = res.uuid
-      })
+      // getCodeImg().then(res => {
+      //   this.codeUrl = res.img
+      //   this.loginForm.uuid = res.uuid
+      // })
     },
     getCookie() {
       const username = Cookies.get('username')