异步加载语言文件

frontend/src/i18n/i18n.js

 import Vue from 'vue';
 import VueI18n from "vue-i18n";
+import axios from "axios";
 import enLocale from "element-ui/lib/locale/lang/en";
 import zh_CNLocale from "element-ui/lib/locale/lang/zh-CN";
-import en_US from "./en_US";
 import zh_CN from "./zh_CN";
 
 Vue.use(VueI18n);
 
 const messages = {
   'en_US': {
-    ...en_US,
     ...enLocale
   },
   'zh_CN': {
@@ -19,8 +18,31 @@ const messages = {
 };
 
 const i18n = new VueI18n({
-  locale: 'en_US',
+  locale: 'zh_CN',
   messages,
 });
 
+const loadedLanguages = ['zh_CN'];
+
+function setI18nLanguage(lang) {
+  i18n.locale = lang;
+  axios.defaults.headers.common['Accept-Language'] = lang;
+  document.querySelector('html').setAttribute('lang', lang);
+  return lang;
+}
+
+Vue.prototype.$setLang = function (lang) {
+  if (i18n.locale !== lang) {
+    if (!loadedLanguages.includes(lang)) {
+      return import(`./${lang}`).then(response => {
+        i18n.mergeLocaleMessage(lang, response.default);
+        loadedLanguages.push(lang);
+        return setI18nLanguage(lang)
+      })
+    }
+    return Promise.resolve(setI18nLanguage(lang))
+  }
+  return Promise.resolve(lang)
+};
+
 export default i18n;

frontend/src/performance/components/HeaderUser.vue

@@ -85,7 +85,7 @@
       handleCommand(command) {
         switch (command) {
           case "personal":
-            this.$i18n.locale = "zh_CN";
+            this.$setLang("en_US");
             break;
           case "logout":
             this.$get("/signout", function () {