配置多语言

package-lock.json

@@ -18,6 +18,7 @@
         "pinia-persistedstate-plugin": "^0.1.0",
         "pinia-plugin-persistedstate": "^3.1.0",
         "vue": "^3.2.47",
+        "vue-i18n": "^11.2.8",
         "vue-router": "^4.1.6"
       },
       "devDependencies": {
@@ -575,6 +576,50 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@intlify/core-base": {
+      "version": "11.2.8",
+      "resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-11.2.8.tgz",
+      "integrity": "sha512-nBq6Y1tVkjIUsLsdOjDSJj4AsjvD0UG3zsg9Fyc+OivwlA/oMHSKooUy9tpKj0HqZ+NWFifweHavdljlBLTwdA==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/message-compiler": "11.2.8",
+        "@intlify/shared": "11.2.8"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "11.2.8",
+      "resolved": "https://registry.npmmirror.com/@intlify/message-compiler/-/message-compiler-11.2.8.tgz",
+      "integrity": "sha512-A5n33doOjmHsBtCN421386cG1tWp5rpOjOYPNsnpjIJbQ4POF0QY2ezhZR9kr0boKwaHjbOifvyQvHj2UTrDFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/shared": "11.2.8",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "11.2.8",
+      "resolved": "https://registry.npmmirror.com/@intlify/shared/-/shared-11.2.8.tgz",
+      "integrity": "sha512-l6e4NZyUgv8VyXXH4DbuucFOBmxLF56C/mqh2tvApbzl2Hrhi1aTDcuv5TKdxzfHYmpO3UB0Cz04fgDT9vszfw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -8333,6 +8378,26 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "11.2.8",
+      "resolved": "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-11.2.8.tgz",
+      "integrity": "sha512-vJ123v/PXCZntd6Qj5Jumy7UBmIuE92VrtdX+AXr+1WzdBHojiBxnAxdfctUFL+/JIN+VQH4BhsfTtiGsvVObg==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "11.2.8",
+        "@intlify/shared": "11.2.8",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.1.6",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.1.6.tgz",
@@ -8866,6 +8931,29 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "@intlify/core-base": {
+      "version": "11.2.8",
+      "resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-11.2.8.tgz",
+      "integrity": "sha512-nBq6Y1tVkjIUsLsdOjDSJj4AsjvD0UG3zsg9Fyc+OivwlA/oMHSKooUy9tpKj0HqZ+NWFifweHavdljlBLTwdA==",
+      "requires": {
+        "@intlify/message-compiler": "11.2.8",
+        "@intlify/shared": "11.2.8"
+      }
+    },
+    "@intlify/message-compiler": {
+      "version": "11.2.8",
+      "resolved": "https://registry.npmmirror.com/@intlify/message-compiler/-/message-compiler-11.2.8.tgz",
+      "integrity": "sha512-A5n33doOjmHsBtCN421386cG1tWp5rpOjOYPNsnpjIJbQ4POF0QY2ezhZR9kr0boKwaHjbOifvyQvHj2UTrDFQ==",
+      "requires": {
+        "@intlify/shared": "11.2.8",
+        "source-map-js": "^1.0.2"
+      }
+    },
+    "@intlify/shared": {
+      "version": "11.2.8",
+      "resolved": "https://registry.npmmirror.com/@intlify/shared/-/shared-11.2.8.tgz",
+      "integrity": "sha512-l6e4NZyUgv8VyXXH4DbuucFOBmxLF56C/mqh2tvApbzl2Hrhi1aTDcuv5TKdxzfHYmpO3UB0Cz04fgDT9vszfw=="
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -14657,6 +14745,16 @@
         }
       }
     },
+    "vue-i18n": {
+      "version": "11.2.8",
+      "resolved": "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-11.2.8.tgz",
+      "integrity": "sha512-vJ123v/PXCZntd6Qj5Jumy7UBmIuE92VrtdX+AXr+1WzdBHojiBxnAxdfctUFL+/JIN+VQH4BhsfTtiGsvVObg==",
+      "requires": {
+        "@intlify/core-base": "11.2.8",
+        "@intlify/shared": "11.2.8",
+        "@vue/devtools-api": "^6.5.0"
+      }
+    },
     "vue-router": {
       "version": "4.1.6",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.1.6.tgz",

package.json

@@ -22,6 +22,7 @@
     "pinia-persistedstate-plugin": "^0.1.0",
     "pinia-plugin-persistedstate": "^3.1.0",
     "vue": "^3.2.47",
+    "vue-i18n": "^11.2.8",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {

src/lang/en.ts

@@ -0,0 +1,5 @@
+export default {
+	Login: {
+
+	},
+}

src/lang/index.ts

@@ -0,0 +1,31 @@
+import { createI18n } from 'vue-i18n'
+// 中文		zh-cn
+// 英文		en
+
+// element-plus 中的语言配置
+import elementEnLocale from './en'
+
+// 自己的语言配置
+import enLocale from './en'
+
+// 语言配置整合
+const messages = {
+  'ENGLISH':{
+    ...enLocale,
+    ...elementEnLocale
+  },
+//   'CHINESE_SIMPLIFIED':{
+//     ...zhLocale,
+//     ...elementZhLocale
+//   },
+}
+
+// 创建 i18n
+const i18n = createI18n({
+  legacy: false,
+  globalInjection:true,  // 全局模式，可以直接使用 $t
+  locale: 'ENGLISH',
+  messages: messages
+})
+
+export default i18n

src/main.ts

@@ -7,6 +7,7 @@ import './assets/css/style.css'
 import SvgIcon from "@/components/SvgIcon/index.vue";
 import "virtual:svg-icons-register";
 
+import i18n from "./lang/index";
 
 import flexible from "./utils/flexible.js";
 
@@ -19,6 +20,7 @@ app.use(router)
 .use(ElementPlus)
 .use(store)
 .component("SvgIcon", SvgIcon)
+.use(i18n)
 .mount('#app')