add i18n

src/components/tools/HeadMenu.vue

@@ -13,71 +13,73 @@
         <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 {
-    name: 'HeadMenu',
-    components: {
-      HeaderNotice,
-      LangSelect
-    },
-    methods: {
-      ...mapActions(['Logout']),
-      ...mapGetters(['nickname', 'avatar']),
-      handleLogout() {
-        const that = this
+export default {
+  name: 'HeadMenu',
+  components: {
+    HeaderNotice,
+    LangSelect
+  },
+  methods: {
+    ...mapActions(['Logout']),
+    ...mapGetters(['nickname', 'avatar']),
+    handleLogout() {
+      const that = this
 
-        this.$confirm({
-          title: '提示',
-          content: '真的要注销登录吗 ?',
-          onOk() {
-            return that.Logout({}).then(() => {
+      this.$confirm({
+        title: '提示',
+        content: '真的要注销登录吗 ?',
+        onOk() {
+          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>
@@ -22,12 +30,14 @@
 
 <script>
 export default {
-    name: 'LangSelect',
-    data () {
-        return {}
-    },
-    methods: {
-
+  name: 'LangSelect',
+  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,12 +3,13 @@ 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'
 
 import Antd from 'ant-design-vue'
 import Viser from 'viser-vue'
-import 'ant-design-vue/dist/antd.less'  // or 'ant-design-vue/dist/antd.less'
+import 'ant-design-vue/dist/antd.less' // or 'ant-design-vue/dist/antd.less'
 
 import VueClipboard from 'vue-clipboard2'
 import '@/permission' // permission control
@@ -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
\ No newline at end of file
+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,71 +32,95 @@ 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 => {
-          const result = response.result
-          Vue.ls.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000)
-          commit('SET_TOKEN', result.token)
-          resolve()
-        }).catch(error => {
-          reject(error)
-        })
+        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 => {
+            reject(error)
+          })
       })
     },
 
     // 获取用户信息
-    GetInfo({ commit }) {
+    GetInfo({ commit, dispatch }) {
       return new Promise((resolve, reject) => {
-        getInfo().then(response => {
-          const result = response.result
+        getInfo()
+          .then(response => {
+            const result = response.result
 
-          if (result.role && result.role.permissions.length > 0) {
-            const role = result.role
-            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 })
-                per.actionList = action
-              }
-            })
-            role.permissionList = role.permissions.map(permission => { return permission.permissionId })
-            commit('SET_ROLES', result.role)
-            commit('SET_INFO', result)
-          } else {
-            reject('getInfo: roles must be a non-null array !')
-          }
+            if (result.role && result.role.permissions.length > 0) {
+              const role = result.role
+              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
+                  })
+                  per.actionList = action
+                }
+              })
+              role.permissionList = role.permissions.map(permission => {
+                return permission.permissionId
+              })
+              commit('SET_ROLES', result.role)
+              commit('SET_INFO', result)
+            } else {
+              reject('getInfo: roles must be a non-null array !')
+            }
 
-          commit('SET_NAME', { name: result.name, welcome: welcome() })
-          commit('SET_AVATAR', result.avatar)
+            commit('SET_NAME', { name: result.name, welcome: welcome() })
+            commit('SET_AVATAR', result.avatar)
 
-          resolve(response)
-        }).catch(error => {
-          reject(error)
-        })
+            // 设置界面语言
+            dispatch('SetLang', result.lang)
+
+            resolve(response)
+          })
+          .catch(error => {
+            reject(error)
+          })
       })
     },
 
     // 登出
     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(() => {
-          resolve()
-        }).catch(() => {
-          resolve()
-        })
+        logout(state.token)
+          .then(() => {
+            resolve()
+          })
+          .catch(() => {
+            resolve()
+          })
       })
     },
 
+    // 设置界面语言
+    SetLang({ commit }, lang) {
+      return new Promise(resolve => {
+        commit('SET_LANG', lang)
+        loadLanguageAsync(lang)
+        resolve()
+      })
+    }
   }
 }
 
-export default user
\ No newline at end of file
+export default user

src/store/mutation-types.js

@@ -5,11 +5,11 @@ 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'
 
 export const CONTENT_WIDTH_TYPE = {
   Fluid: 'Fluid',
   Fixed: 'Fixed'
-}
\ No newline at end of file
+}