feat(i18n): 更新国际化组件，优化语言文件和结构，增强类型支持

auto-imports.d.ts

@@ -151,7 +151,6 @@ declare global {
   const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
-  const useCountdown: typeof import('utils4u/vue-use')['useCountdown']
   const useCounter: typeof import('@vueuse/core')['useCounter']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVar: typeof import('@vueuse/core')['useCssVar']

src/components/i18nComp/index.vue

@@ -1,47 +1,47 @@
-<template>
+<i18n lang="json">
-  <pre>
-&lt;i18n lang="json"&gt;
 {
   "en": {
     "unplugin-hello": "Hello, unplugin-vue-i18n!"
   },
-  "ja": {
+  "zh": {
-    "unplugin-hello": "こんにちは、unplugin-vue-i18n!"
+    "unplugin-hello": "你好，unplugin-vue-i18n！"
   }
 }
-&lt;/i18n&gt;</pre
+</i18n>
-  >
-  <br />
-  <button @click="showMessage">show messages</button>
-  <div><span class="label">$i18n.availableLocales</span>: {{ $i18n.availableLocales }}</div>
-  <p><span class="label">$t('message.hello')</span>: {{ $t('message.hello') }}</p>
-  <p><span class="label">t('message.hello'): Component1 locale messages: </span>: {{ t('message.hello') }}</p>
-  <p>
-    <span class="label">t('message.greeting'): Fallback global locale messages: </span>: {{ t('message.greeting') }}
-  </p>
-  <p><span class="label">$t('unplugin-hello')</span>: {{ $t('unplugin-hello') }}</p>
 
-  <select v-model="$i18n.locale">
+<template>
-    <option v-for="lang in $i18n.availableLocales" :key="lang" :value="lang">{{ lang }}</option>
+  <div class="i18nComp">
-  </select>
+    <div><span class="label">$i18n.availableLocales</span>: {{ $i18n.availableLocales }}</div>
+    <p><span class="label">$t('message.hello')</span>: {{ $t('message.hello') }}</p>
+
+    <p>
+      <span class="label">t('unplugin-hello')</span>: {{ t('unplugin-hello') }}
+      <b>这个定义在i18n lang="json"的</b>
+    </p>
+    <p>
+      <span class="label">t('message.greeting')</span>: {{ t('message.greeting') }}
+      <b>这个在i18n lang="json"没有，会fallback到全局的</b>
+    </p>
+
+    <form>
+      <label for="locale">Change locale:</label>
+      <select id="locale" v-model="$i18n.locale">
+        <option v-for="locale in $i18n.availableLocales" :key="locale" :value="locale">{{ locale }}</option>
+      </select>
+    </form>
+  </div>
 </template>
 
-<script lang="ts">
-const messages = {
-  en: { message: { hello: 'hello component1' } },
-  ja: { message: { hello: 'こんにちは、component1' } },
-};
-</script>
-
 <script setup lang="ts">
-const { t } = useI18n({ messages });
+const { t } = useI18n({
-function showMessage() {
+  inheritLocale: true,
-  alert(JSON.stringify(messages, null, 2));
+  useScope: 'local',
-}
+});
 </script>
 
-<style scoped>
+<style>
-.label {
+.i18nComp .label,
+.i18nComp label {
   color: #2c3e50;
   font-weight: bold;
   background-color: #f8f9fa;
@@ -50,15 +50,3 @@ function showMessage() {
   font-family: monospace;
 }
 </style>
-
-https://vue-i18n.intlify.dev/guide/advanced/sfc.html#unplugin-vue-i18n
-<i18n lang="json">
-{
-  "en": {
-    "unplugin-hello": "Hello, unplugin-vue-i18n!"
-  },
-  "ja": {
-    "unplugin-hello": "こんにちは、unplugin-vue-i18n!"
-  }
-}
-</i18n>

src/locales/en.json

@@ -1,8 +1,6 @@
 {
-  "welcome": "Welcome",
+  "message": {
-  "hello": "Hello, {name}!",
+    "hello": "hello world",
-  "nav": {
+    "greeting": "good morning, world!"
-    "home": "Home",
-    "about": "About"
   }
 }

src/locales/zh.json

@@ -1,8 +1,6 @@
 {
-  "welcome": "欢迎",
+  "message": {
-  "hello": "你好，{name}！",
+    "hello": "你好，世界",
-  "nav": {
+    "greeting": "早上好，世界！"
-    "home": "首页",
-    "about": "关于"
   }
 }

src/main.ts

@@ -10,6 +10,12 @@ import App from './App.vue';
 import { router } from './router';
 import { createI18n } from 'vue-i18n';
 
+/* https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#static-bundle-importing
+ * All i18n resources specified in the plugin `include` option can be loaded
+ * at once using the import syntax
+ */
+import messages from '@intlify/unplugin-vue-i18n/messages';
+
 async function init() {
   if (import.meta.env.MODE === 'development' || 1 === 1) {
     // TODO: https://github.com/hu3dao/vite-plugin-debug/
@@ -24,6 +30,7 @@ async function init() {
     });
   }
 
+  console.debug(`messages :>> `, messages);
   const app = createApp(App)
     .use(createHead())
     .use(createPinia().use(piniaPluginPersistedstate))
@@ -36,21 +43,7 @@ async function init() {
       createI18n({
         legacy: false, // you must set `false`, to use Composition API
         locale: navigator.language,
-        fallbackLocale: 'en',
+        messages,
-        messages: {
-          en: {
-            message: {
-              hello: 'hello world',
-              greeting: 'good morning, world!',
-            },
-          },
-          ja: {
-            message: {
-              hello: 'こんにちは、世界',
-              greeting: 'おはよう、世界！',
-            },
-          },
-        },
       }),
     );
   app.config.globalProperties.$__DEV__ = $__DEV__;

src/types/env.ts

@@ -2,3 +2,4 @@
 /// <reference types="unplugin-vue-router/client" />
 /// <reference types="unplugin-vue-macros/macros-global" />
 /// <reference types="unplugin-icons/types/vue" />
+/// <reference types="@intlify/unplugin-vue-i18n/messages" />

vite.config.ts

@@ -3,8 +3,8 @@ import { unheadVueComposablesImports } from '@unhead/vue';
 import { VantResolver } from '@vant/auto-import-resolver';
 import Vue from '@vitejs/plugin-vue';
 import VueJsx from '@vitejs/plugin-vue-jsx';
-import { dirname } from 'node:path';
+import path from 'node:path';
-import { fileURLToPath, resolve, URL } from 'node:url';
+import { fileURLToPath, URL } from 'node:url';
 import UnoCSS from 'unocss/vite';
 import { type ImportsMap } from 'unplugin-auto-import/types';
 import AutoImport from 'unplugin-auto-import/vite';
@@ -145,7 +145,14 @@ function Plugins() {
     VueI18nPlugin({
       /* options */
       // locale messages resource pre-compile option
-      include: resolve(dirname(fileURLToPath(import.meta.url)), './path/to/src/locales/**'),
+      include: [path.resolve(__dirname, './src/locales/**')],
+
+      // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#transformi18nblock
+      // transformI18nBlock(src) {
+      //   console.debug(`src :>> `, src);
+      //   console.debug(`typeof src :>> `, typeof src);
+      //   return src as string;
+      // },
     }),
   );