refactor: 动态导入语言文件

src/components/custom-footer.vue

@@ -16,7 +16,7 @@ const { t } = useI18n()
         </div>
         <div>
           Code with by
-          <ALink target="_blank" href="https://www.ikxin.com">{{ t('app.author.name') }}</ALink>
+          <ALink target="_blank" href="https://www.ikxin.com">{{ t('main.author') }}</ALink>
         </div>
       </ASpace>
     </div>

src/locales/en/main.ts

@@ -0,0 +1,20 @@
+export default {
+  author: 'ikxin',
+  nav: {
+    activate: 'Activate',
+    check: 'Check',
+    download: 'Download',
+    guide: 'Guide',
+    home: 'Home',
+    monitor: 'Monitor'
+  },
+  theme: {
+    auto: 'Auto Mode',
+    dark: 'Dark Mode',
+    light: 'Light Mode'
+  },
+  languages: {
+    'en-us': 'English',
+    'zh-cn': 'Simplified Chinese'
+  }
+}

src/locales/index.ts

@@ -3,4 +3,17 @@ const en = import.meta.glob('./en/*.ts', {
   eager: true
 })
 
-export default { en }
+const message = {}
+
+for (const key in en) {
+  const [language, fileName] = key.split('/').slice(1)
+  const value = en[key]
+
+  if (!message[language]) {
+    message[language] = {}
+  }
+
+  message[language][fileName.split('.')[0]] = value
+}
+
+export default message

src/main.ts

@@ -1,7 +1,7 @@
 import App from '@/App.vue'
 import { router } from '@/router'
 import { createI18n } from 'vue-i18n'
-import messages from '@intlify/unplugin-vue-i18n/messages'
+// import messages from '@intlify/unplugin-vue-i18n/messages'
 
 import locales from '@/locales'
 
@@ -15,6 +15,6 @@ const app = createApp(App)
 
 const pinia = createPinia()
 
-const i18n = createI18n({ locale: 'zh-cn', messages })
+const i18n = createI18n({ locale: 'en', messages: locales })
 
 app.use(pinia).use(i18n).use(router).mount('#app')

tsconfig.json

@@ -2,6 +2,8 @@
   "compilerOptions": {
     "baseUrl": "./",
     "esModuleInterop": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
     "noEmit": true,
     "paths": { "@/*": ["src/*"] },
     "skipLibCheck": true,