feat(i18n): 添加中文和英文语言文件，集成国际化支持

2024-11-06 18:28:53 +08:00
parent 40752e555f
commit ec1d932250
8 changed files with 269 additions and 23 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -6,6 +6,9 @@
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
  "[typescript]":{
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
--- a/package.json
+++ b/package.json
@ -30,6 +30,7 @@
  },
  "dependencies": {
    "@alova/adapter-axios": "^2.0.9",
+    "@intlify/unplugin-vue-i18n": "^5.2.0",
    "@unhead/vue": "^1.11.10",
    "@vant/use": "^1.6.0",
    "@vueuse/core": "^11.2.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -14,6 +14,9 @@ importers:
      '@alova/adapter-axios':
        specifier: ^2.0.9
        version: 2.0.9(alova@3.1.1)(axios@1.7.7)
+      '@intlify/unplugin-vue-i18n':
+        specifier: ^5.2.0
+        version: 5.2.0(@vue/compiler-dom@3.5.12)(eslint@9.13.0(jiti@2.3.3))(rollup@4.24.0)(typescript@5.6.3)(vue-i18n@10.0.4(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3)
      '@unhead/vue':
        specifier: ^1.11.10
        version: 1.11.10(vue@3.5.12(typescript@5.6.3))
@ -972,18 +975,69 @@ packages:
  '@iconify/utils@2.1.33':
    resolution: {integrity: sha512-jP9h6v/g0BIZx0p7XGJJVtkVnydtbgTgt9mVNcGDYwaa7UhdHdI9dvoq+gKj9sijMSJKxUPEG2JyjsgXjxL7Kw==}

+  '@intlify/bundle-utils@9.0.0-beta.0':
+    resolution: {integrity: sha512-xVaMrgbr60fYE1Jkq+k6grs2ZoXqh1EU71RVKkHkKh3KP7T6OYtG1Vbp1T09/jCUbv1GBd8Ir5WdZDyN+e8BpQ==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      petite-vue-i18n: '*'
+      vue-i18n: '*'
+    peerDependenciesMeta:
+      petite-vue-i18n:
+        optional: true
+      vue-i18n:
+        optional: true
+
  '@intlify/core-base@10.0.4':
    resolution: {integrity: sha512-GG428DkrrWCMhxRMRQZjuS7zmSUzarYcaHJqG9VB8dXAxw4iQDoKVQ7ChJRB6ZtsCsX3Jse1PEUlHrJiyQrOTg==}
    engines: {node: '>= 16'}

+  '@intlify/message-compiler@10.0.0':
+    resolution: {integrity: sha512-OcaWc63NC/9p1cMdgoNKBj4d61BH8sUW1Hfs6YijTd9656ZR4rNqXAlRnBrfS5ABq0vjQjpa8VnyvH9hK49yBw==}
+    engines: {node: '>= 16'}
+
  '@intlify/message-compiler@10.0.4':
    resolution: {integrity: sha512-AFbhEo10DP095/45EauinQJ5hJ3rJUmuuqltGguvc3WsvezZN+g8qNHLGWKu60FHQVizMrQY7VJ+zVlBXlQQkQ==}
    engines: {node: '>= 16'}

+  '@intlify/shared@10.0.0':
+    resolution: {integrity: sha512-6ngLfI7DOTew2dcF9WMJx+NnMWghMBhIiHbGg+wRvngpzD5KZJZiJVuzMsUQE1a5YebEmtpTEfUrDp/NqVGdiw==}
+    engines: {node: '>= 16'}
+
  '@intlify/shared@10.0.4':
    resolution: {integrity: sha512-ukFn0I01HsSgr3VYhYcvkTCLS7rGa0gw4A4AMpcy/A9xx/zRJy7PS2BElMXLwUazVFMAr5zuiTk3MQeoeGXaJg==}
    engines: {node: '>= 16'}

+  '@intlify/unplugin-vue-i18n@5.2.0':
+    resolution: {integrity: sha512-pmRiPY2Nj9mmSrixT69aO45XxGUr5fDBy/IIw4ajLlDTJm5TSmQKA5YNdsH0uxVDCPWy5tlQrF18hkDwI7UJvg==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      petite-vue-i18n: '*'
+      vue: ^3.2.25
+      vue-i18n: '*'
+    peerDependenciesMeta:
+      petite-vue-i18n:
+        optional: true
+      vue-i18n:
+        optional: true
+
+  '@intlify/vue-i18n-extensions@7.0.0':
+    resolution: {integrity: sha512-MtvfJnb4aklpCU5Q/dkWkBT/vGsp3qERiPIwtTq5lX4PCLHtUprAJZp8wQj5ZcwDaFCU7+yVMjYbeXpIf927cA==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      '@intlify/shared': ^9.0.0 || ^10.0.0
+      '@vue/compiler-dom': ^3.0.0
+      vue: ^3.0.0
+      vue-i18n: ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      '@intlify/shared':
+        optional: true
+      '@vue/compiler-dom':
+        optional: true
+      vue:
+        optional: true
+      vue-i18n:
+        optional: true
+
  '@isaacs/cliui@8.0.2':
    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
    engines: {node: '>=12'}
@ -1320,6 +1374,10 @@ packages:
      typescript:
        optional: true

+  '@typescript-eslint/scope-manager@7.18.0':
+    resolution: {integrity: sha512-jjhdIE/FPF2B7Z1uzc6i3oWKbGcHb87Qw7AWj6jmEqNOfDFbJWtjt/XfwCpvNkpGWlcJaog5vTR+VV8+w9JflA==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+
  '@typescript-eslint/scope-manager@8.8.1':
    resolution: {integrity: sha512-X4JdU+66Mazev/J0gfXlcC/dV6JI37h+93W9BRYXrSn0hrE64IoWgVkO9MSJgEzoWkxONgaQpICWg8vAN74wlA==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@ -1333,10 +1391,23 @@ packages:
      typescript:
        optional: true

+  '@typescript-eslint/types@7.18.0':
+    resolution: {integrity: sha512-iZqi+Ds1y4EDYUtlOOC+aUmxnE9xS/yCigkjA7XpTKV6nCBd3Hp/PRGGmdwnfkV2ThMyYldP1wRpm/id99spTQ==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+
  '@typescript-eslint/types@8.8.1':
    resolution: {integrity: sha512-WCcTP4SDXzMd23N27u66zTKMuEevH4uzU8C9jf0RO4E04yVHgQgW+r+TeVTNnO1KIfrL8ebgVVYYMMO3+jC55Q==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

+  '@typescript-eslint/typescript-estree@7.18.0':
+    resolution: {integrity: sha512-aP1v/BSPnnyhMHts8cf1qQ6Q1IFwwRvAQGRvBFkWlo3/lH29OXA3Pts+c10nxRxIBrDnoMqzhgdwVe5f2D6OzA==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
  '@typescript-eslint/typescript-estree@8.8.1':
    resolution: {integrity: sha512-A5d1R9p+X+1js4JogdNilDuuq+EHZdsH9MjTVxXOdVFfTJXunKJR/v+fNNyO4TnoOn5HqobzfRlc70NC6HTcdg==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@ -1352,6 +1423,10 @@ packages:
    peerDependencies:
      eslint: ^8.57.0 || ^9.0.0

+  '@typescript-eslint/visitor-keys@7.18.0':
+    resolution: {integrity: sha512-cDF0/Gf81QpY3xYyJKDV14Zwdmid5+uuENhjH2EqFaF0ni+yAyq/LzMaIJdhNJXZI7uLzwIlA+V7oWoyn6Curg==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+
  '@typescript-eslint/visitor-keys@8.8.1':
    resolution: {integrity: sha512-0/TdC3aeRAsW7MDvYRwEc1Uwm0TIBfzjPFgg60UU2Haj5qsCs9cc3zNgY71edqE3LbWfF/WoZQd3lJoDXFQpag==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@ -2450,6 +2525,10 @@ packages:
    resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
    engines: {node: '>=0.3.1'}

+  dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+
  dotenv@16.4.5:
    resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==}
    engines: {node: '>=12'}
@ -2678,6 +2757,11 @@ packages:
    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
    engines: {node: '>=12'}

+  escodegen@2.1.0:
+    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
+    engines: {node: '>=6.0'}
+    hasBin: true
+
  eslint-config-prettier@9.1.0:
    resolution: {integrity: sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==}
    hasBin: true
@ -3036,6 +3120,10 @@ packages:
    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
    engines: {node: '>=18'}

+  globby@11.1.0:
+    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
+    engines: {node: '>=10'}
+
  globby@14.0.2:
    resolution: {integrity: sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==}
    engines: {node: '>=18'}
@ -3396,6 +3484,10 @@ packages:
    engines: {node: '>=6'}
    hasBin: true

+  jsonc-eslint-parser@2.4.0:
+    resolution: {integrity: sha512-WYDyuc/uFcGp6YtM2H0uKmUwieOuzeE/5YocFJLnLfclZ4inf3mRn8ZVy1s7Hxji7Jxm6Ss8gqpexD/GlKoGgg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
  jsonfile@4.0.0:
    resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}

@ -4269,6 +4361,10 @@ packages:
  sisteransi@1.0.5:
    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}

+  slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+
  slash@5.1.0:
    resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
    engines: {node: '>=14.16'}
@ -5055,6 +5151,10 @@ packages:
  yallist@4.0.0:
    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}

+  yaml-eslint-parser@1.2.3:
+    resolution: {integrity: sha512-4wZWvE398hCP7O8n3nXKu/vdq1HcH01ixYlCREaJL5NUMwQ0g3MaGFUBNSlmBtKmhbtVG/Cm6lyYmSVTEVil8A==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+
  yaml@1.10.2:
    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
    engines: {node: '>= 6'}
@ -5708,18 +5808,76 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  '@intlify/bundle-utils@9.0.0-beta.0(vue-i18n@10.0.4(vue@3.5.12(typescript@5.6.3)))':
+    dependencies:
+      '@intlify/message-compiler': 10.0.0
+      '@intlify/shared': 10.0.0
+      acorn: 8.12.1
+      escodegen: 2.1.0
+      estree-walker: 2.0.2
+      jsonc-eslint-parser: 2.4.0
+      mlly: 1.7.2
+      source-map-js: 1.2.1
+      yaml-eslint-parser: 1.2.3
+    optionalDependencies:
+      vue-i18n: 10.0.4(vue@3.5.12(typescript@5.6.3))
+
  '@intlify/core-base@10.0.4':
    dependencies:
      '@intlify/message-compiler': 10.0.4
      '@intlify/shared': 10.0.4

+  '@intlify/message-compiler@10.0.0':
+    dependencies:
+      '@intlify/shared': 10.0.0
+      source-map-js: 1.2.1
+
  '@intlify/message-compiler@10.0.4':
    dependencies:
      '@intlify/shared': 10.0.4
      source-map-js: 1.2.1

+  '@intlify/shared@10.0.0': {}
+
  '@intlify/shared@10.0.4': {}

+  '@intlify/unplugin-vue-i18n@5.2.0(@vue/compiler-dom@3.5.12)(eslint@9.13.0(jiti@2.3.3))(rollup@4.24.0)(typescript@5.6.3)(vue-i18n@10.0.4(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.13.0(jiti@2.3.3))
+      '@intlify/bundle-utils': 9.0.0-beta.0(vue-i18n@10.0.4(vue@3.5.12(typescript@5.6.3)))
+      '@intlify/shared': 10.0.0
+      '@intlify/vue-i18n-extensions': 7.0.0(@intlify/shared@10.0.0)(@vue/compiler-dom@3.5.12)(vue-i18n@10.0.4(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
+      '@rollup/pluginutils': 5.1.2(rollup@4.24.0)
+      '@typescript-eslint/scope-manager': 7.18.0
+      '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.6.3)
+      debug: 4.3.7
+      fast-glob: 3.3.2
+      js-yaml: 4.1.0
+      json5: 2.2.3
+      pathe: 1.1.2
+      picocolors: 1.1.0
+      source-map-js: 1.2.1
+      unplugin: 1.14.1(webpack-sources@3.2.3)
+      vue: 3.5.12(typescript@5.6.3)
+    optionalDependencies:
+      vue-i18n: 10.0.4(vue@3.5.12(typescript@5.6.3))
+    transitivePeerDependencies:
+      - '@vue/compiler-dom'
+      - eslint
+      - rollup
+      - supports-color
+      - typescript
+      - webpack-sources
+
+  '@intlify/vue-i18n-extensions@7.0.0(@intlify/shared@10.0.0)(@vue/compiler-dom@3.5.12)(vue-i18n@10.0.4(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))':
+    dependencies:
+      '@babel/parser': 7.26.2
+    optionalDependencies:
+      '@intlify/shared': 10.0.0
+      '@vue/compiler-dom': 3.5.12
+      vue: 3.5.12(typescript@5.6.3)
+      vue-i18n: 10.0.4(vue@3.5.12(typescript@5.6.3))
+
  '@isaacs/cliui@8.0.2':
    dependencies:
      string-width: 5.1.2
@ -6054,6 +6212,11 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  '@typescript-eslint/scope-manager@7.18.0':
+    dependencies:
+      '@typescript-eslint/types': 7.18.0
+      '@typescript-eslint/visitor-keys': 7.18.0
+
  '@typescript-eslint/scope-manager@8.8.1':
    dependencies:
      '@typescript-eslint/types': 8.8.1
@ -6071,8 +6234,25 @@ snapshots:
      - eslint
      - supports-color

+  '@typescript-eslint/types@7.18.0': {}
+
  '@typescript-eslint/types@8.8.1': {}

+  '@typescript-eslint/typescript-estree@7.18.0(typescript@5.6.3)':
+    dependencies:
+      '@typescript-eslint/types': 7.18.0
+      '@typescript-eslint/visitor-keys': 7.18.0
+      debug: 4.3.7
+      globby: 11.1.0
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.6.3
+      ts-api-utils: 1.3.0(typescript@5.6.3)
+    optionalDependencies:
+      typescript: 5.6.3
+    transitivePeerDependencies:
+      - supports-color
+
  '@typescript-eslint/typescript-estree@8.8.1(typescript@5.6.3)':
    dependencies:
      '@typescript-eslint/types': 8.8.1
@ -6099,6 +6279,11 @@ snapshots:
      - supports-color
      - typescript

+  '@typescript-eslint/visitor-keys@7.18.0':
+    dependencies:
+      '@typescript-eslint/types': 7.18.0
+      eslint-visitor-keys: 3.4.3
+
  '@typescript-eslint/visitor-keys@8.8.1':
    dependencies:
      '@typescript-eslint/types': 8.8.1
@ -7624,6 +7809,10 @@ snapshots:

  diff@4.0.2: {}

+  dir-glob@3.0.1:
+    dependencies:
+      path-type: 4.0.0
+
  dotenv@16.4.5: {}

  duplexer@0.1.2: {}
@ -7864,6 +8053,14 @@ snapshots:

  escape-string-regexp@5.0.0: {}

+  escodegen@2.1.0:
+    dependencies:
+      esprima: 4.0.1
+      estraverse: 5.3.0
+      esutils: 2.0.3
+    optionalDependencies:
+      source-map: 0.6.1
+
  eslint-config-prettier@9.1.0(eslint@9.13.0(jiti@2.3.3)):
    dependencies:
      eslint: 9.13.0(jiti@2.3.3)
@ -8289,6 +8486,15 @@ snapshots:

  globals@14.0.0: {}

+  globby@11.1.0:
+    dependencies:
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.2
+      ignore: 5.3.2
+      merge2: 1.4.1
+      slash: 3.0.0
+
  globby@14.0.2:
    dependencies:
      '@sindresorhus/merge-streams': 2.3.0
@ -8640,6 +8846,13 @@ snapshots:

  json5@2.2.3: {}

+  jsonc-eslint-parser@2.4.0:
+    dependencies:
+      acorn: 8.12.1
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      semver: 7.6.3
+
  jsonfile@4.0.0:
    optionalDependencies:
      graceful-fs: 4.2.11
@ -9497,6 +9710,8 @@ snapshots:

  sisteransi@1.0.5: {}

+  slash@3.0.0: {}
+
  slash@5.1.0: {}

  slice-ansi@5.0.0:
@ -10439,6 +10654,12 @@ snapshots:

  yallist@4.0.0: {}

+  yaml-eslint-parser@1.2.3:
+    dependencies:
+      eslint-visitor-keys: 3.4.3
+      lodash: 4.17.21
+      yaml: 2.5.1
+
  yaml@1.10.2: {}

  yaml@2.5.1: {}
--- a/src/locales/en.json
+++ b/src/locales/en.json
@ -0,0 +1,8 @@
+{
+  "welcome": "Welcome",
+  "hello": "Hello, {name}!",
+  "nav": {
+    "home": "Home",
+    "about": "About"
+  }
+}
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@ -0,0 +1,8 @@
+{
+  "welcome": "欢迎",
+  "hello": "你好，{name}！",
+  "nav": {
+    "home": "首页",
+    "about": "关于"
+  }
+}
--- a/src/main.ts
+++ b/src/main.ts
@ -9,6 +9,12 @@ import { createI18n } from 'vue-i18n';
 import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders';
 import App from './App.vue';
 import { router } from './router';
+// 自动导入语言文件
+const messages = Object.fromEntries(
+  Object.entries(import.meta.glob('./locales/*.json', { eager: true })).map(([key, value]) => {
+    return [key.slice('./locales/'.length, -5), value.default];
+  }),
+);

 async function init() {
  if (import.meta.env.MODE === 'development' || 1 === 1) {
@ -33,20 +39,10 @@ async function init() {
    .use(router)
    .use(
      createI18n({
-        locale: 'zh_CN', // 默认显示语言
-        fallbackLocale: 'zh_CN',
-        messages: {
-          en_US: {
-            message: {
-              hello: 'hello',
-            },
-          },
-          zh_CN: {
-            message: {
-              hello: '你好',
-            },
-          },
-        },
+        legacy: false, // 使用 Composition API 模式
+        locale: 'zh', // 默认语言
+        fallbackLocale: 'en', // 回退语言
+        messages,
      }),
    );
  app.config.globalProperties.$__DEV__ = $__DEV__;
--- a/src/pages/index-page.vue
+++ b/src/pages/index-page.vue
@ -19,11 +19,6 @@ import { useI18n } from 'vue-i18n';

 const { locale } = useI18n();

-const handleLanguageChange = (event: Event) => {
-  const select = event.target as HTMLSelectElement;
-  locale.value = select.value;
-};
-
 // https://cn.vuejs.org/guide/extras/render-function#typing-functional-components
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const FComponent: FunctionalComponent<{ prop: string }> = (props, context) => (
@ -46,11 +41,12 @@ const FComponent: FunctionalComponent<{ prop: string }> = (props, context) => (
  </ul>

  <div b="1px solid pink" mt-8>
-    <select :value="locale" @change="handleLanguageChange">
-      <option value="zh_CN">中文</option>
-      <option value="en_US">English</option>
+    <select v-model="locale">
+      <option value="zh">中文</option>
+      <option value="en">English</option>
    </select>
-    <h1>{{ $t('message.hello') }}</h1>
+    <h1>{{ $t('welcome') }}</h1>
+    <p>{{ $t('hello', { name: 'John' }) }}</p>
  </div>

  <FComponent prop="Hello World" style="margin-top: 8px"></FComponent>
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,3 +1,4 @@
+import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
 import { unheadVueComposablesImports } from '@unhead/vue';
 import { VantResolver } from '@vant/auto-import-resolver';
 import Vue from '@vitejs/plugin-vue';
@ -22,6 +23,7 @@ import cdnImport from 'vite-plugin-cdn-import';
 import { vitePluginFakeServer } from 'vite-plugin-fake-server';
 import vueDevTools from 'vite-plugin-vue-devtools';
 import { ViteWebfontDownload } from 'vite-plugin-webfont-dl';
+import { resolve, dirname } from 'node:path';

 // https://vitejs.dev/config/
 export default defineConfig(({ mode, command }) => {
@ -138,6 +140,17 @@ function Plugins() {
      enableProd: true,
    }),
  );
+
+  plugins.push(
+    VueI18nPlugin({
+      include: resolve(dirname(fileURLToPath(import.meta.url)), './src/locales/**'),
+      // 可选：指定语言文件格式，默认为 json
+      // runtimeOnly: false,
+      // compositionOnly: false,
+      // fullInstall: true
+    }),
+  );
+
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const unused = () => {
    plugins.push(