i18n优化

PC/UI.WinIn.FasterZ.Store/src/lang/index.js

@@ -1,16 +1,19 @@
-// lang/index.js
 import Vue from "vue"
+import VueI18n from 'vue-i18n'
 import ElementUI from "element-ui"
-import VueI18n from "vue-i18n"
-// elment-ui 
-import locale from "element-ui/lib/locale"
-import zhLocale from "element-ui/lib/locale/lang/zh-CN"
-import enLocale from "element-ui/lib/locale/lang/en"
+// element 多语言文件
+import locale from 'element-ui/lib/locale'
+import enLocale from 'element-ui/lib/locale/lang/en'
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
 // 自己的多语言文件
 import zh from "./zh"
 import en from "./en"
-
 Vue.use(VueI18n)
+Vue.use(ElementUI, { zhLocale });
+// InitLanguage 将用户选择的语言存储到localStorage里
+function InitLanguage() {
+    return (localStorage.getItem("browserLanguage") == null || localStorage.getItem("browserLanguage") == undefined) ? 'zh-CN' : localStorage.getItem("browserLanguage");
+}
 
 const messages = {
     "zh-CN": {
@@ -21,30 +24,17 @@ const messages = {
         ...en,
         ...enLocale,
     }
-}
+};
 
 const i18n = new VueI18n({
+    legacy: false,
     messages,
+    globalInjection: true, // 全局生效$t
     fallbackLocale: "zh-CN", // 匹配不到时默认的语言
     silentTranslationWarn: true,  // 控制台的warning
-    locale: localStorage.getItem("browserLanguage") || "zh-CN", // set locale
+    locale: InitLanguage(), 
 })
 
-locale.use(ElementUI, {
-    i18n: (key, value) => i18n.t(key, value),
-})
-
-// *** 
-// 非 vue 文件中使用这个方法
-const translate = (localeKey) => {
-    const locale = localStorage.getItem("language") || "zh-CN"
-    const hasKey = i18n.te(localeKey, locale)  // 使用i18n的 te 方法来检查是否能够匹配到对应键值
-    const translatedStr = i18n.t(localeKey) 
-    if (hasKey) {
-        return translatedStr
-    }
-    return localeKey
-}
+locale.i18n((key, value) => i18n.t(key, value))
 
-export { messages, translate }
 export default i18n

PC/UI.WinIn.FasterZ.Store/src/router/index.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import { translate as $t } from "@/lang"
+import i18n from "@/lang"
 
 Vue.use(Router)
 
@@ -71,7 +71,7 @@ export let constantRoutes = [
       name: 'Dashboard',
       meta: {
         keepAlive : true, 
-        title: $t('common.home'),
+        title: i18n.t('common.home'),
         icon: 'svg_dashboard',
         outerFirst:true
         // affix: true