diff --git a/src/i18n/date.js b/src/i18n/date.js
index 6d25522fc..48432eb0a 100644
--- a/src/i18n/date.js
+++ b/src/i18n/date.js
@@ -13,7 +13,7 @@ export default {
       hour: 'numeric', minute: 'numeric'
     }
   },
-  'cn': {
+  'zh': {
     short: {
       year: 'numeric', month: 'short', day: 'numeric'
     },
diff --git a/src/i18n/i18n.js b/src/i18n/i18n.js
index e975d6412..c66adb942 100644
--- a/src/i18n/i18n.js
+++ b/src/i18n/i18n.js
@@ -4,19 +4,13 @@ import locale from 'element-ui/lib/locale'
 import VueI18n from 'vue-i18n'
 import messages from './langs'
 import date from './date'
-import VueCookie from 'vue-cookie'
 import axios from 'axios'
 import store from '@/store'
+import { getLangCode } from './utils'
 
 Vue.use(VueI18n)
-const cookieLang = VueCookie.get('django_language')
-const browserLang = navigator.systemLanguage || navigator.language || navigator.userLanguage
-let lang = cookieLang || browserLang || 'en'
-if (lang === 'zh-hant') {
-  lang = 'zh_hant'
-} else {
-  lang = lang.slice(0, 2)
-}
+const lang = getLangCode()
+
 const i18n = new VueI18n({
   locale: lang,
   fallbackLocale: 'en',
diff --git a/src/i18n/langs/index.js b/src/i18n/langs/index.js
index b7b26bfcf..bc3d6e31b 100644
--- a/src/i18n/langs/index.js
+++ b/src/i18n/langs/index.js
@@ -3,7 +3,7 @@ import zhTWLocale from 'element-ui/lib/locale/lang/zh-TW'
 import enLocale from 'element-ui/lib/locale/lang/en'
 import jaLocale from 'element-ui/lib/locale/lang/ja'
 import zh from './zh.json'
-import zhHant from './zh_Hant.json'
+import zhHant from './zh_hant.json'
 import en from './en.json'
 import ja from './ja.json'
 
diff --git a/src/i18n/utils.js b/src/i18n/utils.js
new file mode 100644
index 000000000..cd5e4c245
--- /dev/null
+++ b/src/i18n/utils.js
@@ -0,0 +1,13 @@
+import VueCookie from 'vue-cookie'
+
+export function getLangCode() {
+  const cookieLang = VueCookie.get('django_language')
+  const browserLang = navigator.systemLanguage || navigator.language || navigator.userLanguage
+  let lang = cookieLang || browserLang || 'en'
+  lang = lang.replace('-', '_')
+  if (lang !== 'zh_hant') {
+    lang = lang.slice(0, 2)
+  }
+  return lang
+}
+
diff --git a/src/layout/components/NavHeader/Language.vue b/src/layout/components/NavHeader/Language.vue
index 094f921a1..738ce1f47 100644
--- a/src/layout/components/NavHeader/Language.vue
+++ b/src/layout/components/NavHeader/Language.vue
@@ -16,33 +16,21 @@
 </template>
 
 <script>
+import { getLangCode } from '@/i18n/utils'
+import store from '@/store'
+
 export default {
   name: 'Language',
   data() {
     return {
-      LANG_COOKIE_NAME: 'django_language', // 后端Django需要的COOKIE KEY
-      supportLanguages: [
-        {
-          title: '中文(简体)',
-          code: 'cn',
-          cookieCode: 'zh-hans' // cookie code是为了让后端知道当前语言
-        },
-        {
-          title: '中文(繁體)',
-          code: 'zh_hant',
-          cookieCode: 'zh-hant' // cookie code是为了让后端知道当前语言
-        },
-        {
-          title: 'English',
-          code: 'en',
-          cookieCode: 'en'
-        },
-        {
-          title: '日本語',
-          code: 'ja',
-          cookieCode: 'ja' // cookie code是为了让后端知道当前语言
-        }
-      ]
+      langCookeName: 'django_language', // 后端Django需要的COOKIE KEY
+      supportLanguages: [],
+      currentLangCode: '',
+      defaultLang: {
+        title: 'English',
+        code: 'en',
+        cookieCode: 'en'
+      }
     }
   },
   computed: {
@@ -50,18 +38,26 @@ export default {
       return this.supportLanguages.reduce((map, obj) => {
         map[obj.code] = obj
         return map
-      })
+      }, {})
     },
     currentLang() {
-      const langCode = this.getLangCode()
-      let lang = this.supportedLangMapper[langCode]
-      if (!lang) {
-        lang = this.supportLanguages[0]
-      }
+      const lang = this.supportedLangMapper[this.currentLangCode] || this.defaultLang
       return lang
     }
   },
   mounted() {
+    this.currentLangCode = getLangCode()
+    this.supportLanguages = store.getters.publicSettings['LANGUAGES'].map(item => {
+      let code = item.code.replace('-', '_')
+      if (code !== 'zh_hant') {
+        code = code.slice(0, 2)
+      }
+      return {
+        title: item.name,
+        code: code,
+        cookieCode: item.code
+      }
+    })
     this.changeMomentLang()
   },
   methods: {
@@ -83,21 +79,8 @@ export default {
     },
     changeLangTo(item) {
       this.$i18n.locale = item.code
-      this.$cookie.set(this.LANG_COOKIE_NAME, item.cookieCode, { expires: 365 })
+      this.$cookie.set(this.langCookeName, item.cookieCode, { expires: 365 })
       window.location.reload()
-    },
-    getLangCode() {
-      let langCode = this.$cookie.get(this.LANG_COOKIE_NAME)
-      if (!langCode) {
-        langCode = navigator.systemLanguage || navigator.language || navigator.userLanguage
-      }
-      if (langCode === 'zh-hant') {
-        langCode = 'zh_hant'
-      } else {
-        langCode = langCode.slice(0, 2)
-        langCode = langCode.replace('zh', 'cn')
-      }
-      return langCode
     }
   }
 }
diff --git a/src/utils/jms.js b/src/utils/jms.js
index d09a51322..dba291b79 100644
--- a/src/utils/jms.js
+++ b/src/utils/jms.js
@@ -1,5 +1,5 @@
-import store from '@/store'
 import { constantRoutes } from '@/router'
+import store from '@/store'
 import { openWindow } from './common'
 
 export function openTaskPage(taskId, taskType, taskUrl) {