add i18n

src/components/tools/HeadMenu.vue

@@ -13,39 +13,40 @@
         <a-menu-item key="0">
           <router-link :to="{ name: 'center' }">
             <a-icon type="user"/>
-            <span>个人中心</span>
+            <span>{{ $t('header.HeadMenu.center') }}</span>
           </router-link>
         </a-menu-item>
         <a-menu-item key="1">
           <router-link :to="{ name: 'settings' }">
             <a-icon type="setting"/>
-            <span>账户设置</span>
+            <span>{{ $t('header.HeadMenu.settings') }}</span>
           </router-link>
         </a-menu-item>
         <a-menu-item key="2" disabled>
           <a-icon type="setting"/>
-          <span>测试</span>
+          <span>{{ $t('header.HeadMenu.test') }}</span>
         </a-menu-item>
         <a-menu-divider/>
         <a-menu-item key="3">
           <a href="javascript:;" @click="handleLogout">
             <a-icon type="logout"/>
-            <span>退出登录</span>
+            <!-- <span v-t="'header.HeadMenu.logout'"></span> -->
+            <span>{{ $t('header.HeadMenu.logout') }}</span>
           </a>
         </a-menu-item>
       </a-menu>
     </a-dropdown>
     <!-- select lang component -->
-    <lang-select />
+    <lang-select/>
   </div>
 </template>
 
 <script>
-  import HeaderNotice from './HeaderNotice'
-  import LangSelect from '@/components/tools/LangSelect'
-  import { mapActions, mapGetters } from 'vuex'
+import HeaderNotice from './HeaderNotice'
+import LangSelect from '@/components/tools/LangSelect'
+import { mapActions, mapGetters } from 'vuex'
 
-  export default {
+export default {
   name: 'HeadMenu',
   components: {
     HeaderNotice,
@@ -61,23 +62,24 @@
         title: '提示',
         content: '真的要注销登录吗 ?',
         onOk() {
-            return that.Logout({}).then(() => {
+          return that
+            .Logout({})
+            .then(() => {
               window.location.reload()
-            }).catch(err => {
+            })
+            .catch(err => {
               that.$message.error({
                 title: '错误',
                 description: err.message
               })
             })
         },
-          onCancel() {
-          },
+        onCancel() {}
       })
-      },
     }
   }
+}
 </script>
 
 <style scoped>
-
 </style>
\ No newline at end of file

src/components/tools/LangSelect.vue

 <template>
   <a-dropdown>
     <span class="action global-lang">
-      <a-icon type="global" style="font-size: 16px" />
+      <a-icon type="global" style="font-size: 16px"/>
     </span>
-    <a-menu slot="overlay" style="width: 150px;">
-      <a-menu-item key="zhCN">
-        <a rel="noopener noreferrer"><span role="img" aria-label="简体中文">🇨🇳</span>简体中文</a>
+    <a-menu slot="overlay" style="width: 150px;" @click="SwitchLang">
+      <a-menu-item key="zh-CN">
+        <a rel="noopener noreferrer">
+          <span role="img" aria-label="简体中文">🇨🇳</span> 简体中文
+        </a>
       </a-menu-item>
-      <a-menu-item key="zhTW">
-        <a rel="noopener noreferrer"><span role="img" aria-label="繁体中文">🇭🇰</span>繁体中文</a>
+      <a-menu-item key="zh-TW">
+        <a rel="noopener noreferrer">
+          <span role="img" aria-label="繁体中文">🇭🇰</span> 繁体中文
+        </a>
       </a-menu-item>
-      <a-menu-item key="enUS">
-        <a rel="noopener noreferrer"><span role="img" aria-label="English">🇬🇧</span>English</a>
+      <a-menu-item key="en-US">
+        <a rel="noopener noreferrer">
+          <span role="img" aria-label="English">🇬🇧</span> English
+        </a>
       </a-menu-item>
-      <a-menu-item key="Português">
-        <a rel="noopener noreferrer"><span role="img" aria-label="Português">🇧🇷</span>Português</a>
+      <a-menu-item key="pt-BR">
+        <a rel="noopener noreferrer">
+          <span role="img" aria-label="Português">🇧🇷</span> Português
+        </a>
       </a-menu-item>
     </a-menu>
   </a-dropdown>
@@ -23,11 +31,13 @@
 <script>
 export default {
   name: 'LangSelect',
-    data () {
+  data() {
     return {}
   },
   methods: {
-
+    SwitchLang(row) {
+      this.$store.dispatch('SetLang', row.key)
+    }
   }
 }
 </script>

src/lang/index.js

+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import en_us from './locale/en-US'
+import axios from 'axios'
+
+Vue.use(VueI18n)
+
+const messages = {
+  'en-US': {
+    ...en_us
+  }
+}
+
+// 默认语言
+const defaultLanguage = 'en-US'
+
+const i18n = new VueI18n({
+  locale: defaultLanguage,
+  fallbackLocale: defaultLanguage,
+  messages
+})
+
+export default i18n
+
+// 已经import的语言
+const loadedLanguages = [defaultLanguage]
+
+// 使用已经缓存的语言设置
+if (defaultLanguage !== localStorage.lang) {
+  loadLanguageAsync(localStorage.lang)
+}
+
+function setI18nLanguage(lang) {
+  i18n.locale = lang
+  axios.defaults.headers.common['Accept-Language'] = lang
+  document.querySelector('html').setAttribute('lang', lang)
+  return lang
+}
+
+export function loadLanguageAsync(lang = defaultLanguage) {
+  return new Promise(resolve => {
+    // 缓存语言设置
+    localStorage.lang = lang
+    if (i18n.locale !== lang) {
+      if (!loadedLanguages.includes(lang)) {
+        return import(/* webpackChunkName: "lang-[request]" */ `./locale/${lang}`).then(msgs => {
+          i18n.setLocaleMessage(lang, msgs.default)
+          loadedLanguages.push(lang)
+          return setI18nLanguage(lang)
+        })
+      }
+      return resolve(setI18nLanguage(lang))
+    }
+    return resolve(lang)
+  })
+}

src/lang/locale/en-US.js

+export default {
+  header: {
+    HeadMenu: {
+      center: 'user center',
+      settings: 'user settings',
+      test: 'test',
+      logout: 'logout'
+    }
+  }
+}

src/lang/locale/pt-BR.js

+export default {
+  header: {
+    HeadMenu: {
+      center: 'Centro de usuários',
+      settings: 'Configurações da conta',
+      test: 'test',
+      logout: 'Sair'
+    }
+  }
+}

src/lang/locale/zh-CN.js

+export default {
+  header: {
+    HeadMenu: {
+      center: '用户中心',
+      settings: '账户设置',
+      test: 'test',
+      logout: '退出登录'
+    }
+  }
+}

src/lang/locale/zh-TW.js

+export default {
+  header: {
+    HeadMenu: {
+      center: '用戶中心',
+      settings: '賬戶設置',
+      test: 'test',
+      logout: '退出登錄'
+    }
+  }
+}

src/main.js

@@ -3,6 +3,7 @@ import App from './App.vue'
 import Storage from 'vue-ls'
 import router from './router'
 import store from './store/'
+import i18n from './lang'
 
 import { VueAxios } from '@/utils/request'
 
@@ -43,7 +44,8 @@ Vue.use(PermissionHelper)
 new Vue({
   router,
   store,
-  created () {
+  i18n,
+  created() {
     store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
     store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
     store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout))

src/store/getters.js

@@ -8,7 +8,8 @@ const getters = {
   welcome: state => state.user.welcome,
   roles: state => state.user.roles,
   userInfo: state => state.user.info,
-  addRouters: state => state.permission.addRouters
+  addRouters: state => state.permission.addRouters,
+  lang: state => state.user.lang
 }
 
 export default getters

src/store/index.js

@@ -14,14 +14,8 @@ export default new Vuex.Store({
     user,
     permission
   },
-  state: {
-
-  },
-  mutations: {
-
-  },
-  actions: {
-
-  },
+  state: {},
+  mutations: {},
+  actions: {},
   getters
 })

src/store/modules/user.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import { login, getInfo, logout } from '@/api/login'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
 import { welcome } from '@/utils/util'
+import { loadLanguageAsync } from '@/lang'
 
 const user = {
   state: {
@@ -10,7 +11,8 @@ const user = {
     welcome: '',
     avatar: '',
     roles: [],
-    info: {}
+    info: {},
+    lang: 'en-US'
   },
 
   mutations: {
@@ -30,27 +32,33 @@ const user = {
     SET_INFO: (state, info) => {
       state.info = info
     },
+    SET_LANG: (state, lang) => {
+      state.lang = lang
+    }
   },
 
   actions: {
     // 登录
     Login({ commit }, userInfo) {
       return new Promise((resolve, reject) => {
-        login(userInfo).then(response => {
+        login(userInfo)
+          .then(response => {
             const result = response.result
             Vue.ls.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000)
             commit('SET_TOKEN', result.token)
             resolve()
-        }).catch(error => {
+          })
+          .catch(error => {
             reject(error)
           })
       })
     },
 
     // 获取用户信息
-    GetInfo({ commit }) {
+    GetInfo({ commit, dispatch }) {
       return new Promise((resolve, reject) => {
-        getInfo().then(response => {
+        getInfo()
+          .then(response => {
             const result = response.result
 
             if (result.role && result.role.permissions.length > 0) {
@@ -58,11 +66,15 @@ const user = {
               role.permissions = result.role.permissions
               role.permissions.map(per => {
                 if (per.actionEntitySet != null && per.actionEntitySet.length > 0) {
-                const action = per.actionEntitySet.map(action => { return action.action })
+                  const action = per.actionEntitySet.map(action => {
+                    return action.action
+                  })
                   per.actionList = action
                 }
               })
-            role.permissionList = role.permissions.map(permission => { return permission.permissionId })
+              role.permissionList = role.permissions.map(permission => {
+                return permission.permissionId
+              })
               commit('SET_ROLES', result.role)
               commit('SET_INFO', result)
             } else {
@@ -72,8 +84,12 @@ const user = {
             commit('SET_NAME', { name: result.name, welcome: welcome() })
             commit('SET_AVATAR', result.avatar)
 
+            // 设置界面语言
+            dispatch('SetLang', result.lang)
+
             resolve(response)
-        }).catch(error => {
+          })
+          .catch(error => {
             reject(error)
           })
       })
@@ -81,19 +97,29 @@ const user = {
 
     // 登出
     Logout({ commit, state }) {
-      return new Promise((resolve) => {
+      return new Promise(resolve => {
         commit('SET_TOKEN', '')
         commit('SET_ROLES', [])
         Vue.ls.remove(ACCESS_TOKEN)
 
-        logout(state.token).then(() => {
+        logout(state.token)
+          .then(() => {
             resolve()
-        }).catch(() => {
+          })
+          .catch(() => {
             resolve()
           })
       })
     },
 
+    // 设置界面语言
+    SetLang({ commit }, lang) {
+      return new Promise(resolve => {
+        commit('SET_LANG', lang)
+        loadLanguageAsync(lang)
+        resolve()
+      })
+    }
   }
 }
 

src/store/mutation-types.js

@@ -5,7 +5,7 @@ export const DEFAULT_LAYOUT_MODE = 'DEFAULT_LAYOUT_MODE'
 export const DEFAULT_COLOR = 'DEFAULT_COLOR'
 export const DEFAULT_COLOR_WEAK = 'DEFAULT_COLOR_WEAK'
 export const DEFAULT_FIXED_HEADER = 'DEFAULT_FIXED_HEADER'
-export const DEFAULT_FIXED_SIDEMENU= 'DEFAULT_FIXED_SIDEMENU'
+export const DEFAULT_FIXED_SIDEMENU = 'DEFAULT_FIXED_SIDEMENU'
 export const DEFAULT_FIXED_HEADER_HIDDEN = 'DEFAULT_FIXED_HEADER_HIDDEN'
 export const DEFAULT_CONTENT_WIDTH_TYPE = 'DEFAULT_CONTENT_WIDTH_TYPE'