From 40752e555f0967b437b17b5c93c4ee38c784fda9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= Date: Wed, 6 Nov 2024 17:44:32 +0800 Subject: [PATCH] =?UTF-8?q?feat(i18n):=20=E6=B7=BB=E5=8A=A0=E5=9B=BD?= =?UTF-8?q?=E9=99=85=E5=8C=96=E6=94=AF=E6=8C=81=EF=BC=8C=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E8=AF=AD=E8=A8=80=E5=88=87=E6=8D=A2=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .npmrc | 2 +- package.json | 5 +++- pnpm-lock.yaml | 53 ++++++++++++++++++++++++++++++++++------ src/main.ts | 21 +++++++++++++++- src/pages/index-page.vue | 29 +++++++++++++++++----- typed-router.d.ts | 1 + 6 files changed, 94 insertions(+), 17 deletions(-) diff --git a/.npmrc b/.npmrc index c3fa854..04e202f 100644 --- a/.npmrc +++ b/.npmrc @@ -5,7 +5,7 @@ registry=https://mirrors.cloud.tencent.com/npm/ registry=https://mirrors.huaweicloud.com/repository/npm/ # https://pnpm.io/zh/npmrc#node-mirrorltreleasedir -# use-node-version=20.18.0 +use-node-version=22.11.0 node-mirror:release=https://npmmirror.com/mirrors/node/ # pnpm config set node-mirror:release=https://npmmirror.com/mirrors/node/ node-mirror:rc=https://npmmirror.com/mirrors/node-rc/ node-mirror:nightly=https://npmmirror.com/mirrors/node-nightly/ diff --git a/package.json b/package.json index ef802dd..8d4c646 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,9 @@ ] }, "pnpm": { - "patchedDependencies": {} + "overrides": { + "import-meta-resolve": "^4.1.0" + } }, "dependencies": { "@alova/adapter-axios": "^2.0.9", @@ -49,6 +51,7 @@ "vant": "^4.9.8", "vite-plugin-webfont-dl": "^3.9.5", "vue": "^3.5.12", + "vue-i18n": "10", "vue-page-stack": "^3.2.0", "vue-router": "^4.4.5" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b568750..deca1a4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,6 +4,9 @@ settings: autoInstallPeers: true excludeLinksFromLockfile: false +overrides: + import-meta-resolve: ^4.1.0 + importers: .: @@ -74,6 +77,9 @@ importers: vue: specifier: ^3.5.12 version: 3.5.12(typescript@5.6.3) + vue-i18n: + specifier: '10' + version: 10.0.4(vue@3.5.12(typescript@5.6.3)) vue-page-stack: specifier: ^3.2.0 version: 3.2.0(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3)) @@ -966,6 +972,18 @@ packages: '@iconify/utils@2.1.33': resolution: {integrity: sha512-jP9h6v/g0BIZx0p7XGJJVtkVnydtbgTgt9mVNcGDYwaa7UhdHdI9dvoq+gKj9sijMSJKxUPEG2JyjsgXjxL7Kw==} + '@intlify/core-base@10.0.4': + resolution: {integrity: sha512-GG428DkrrWCMhxRMRQZjuS7zmSUzarYcaHJqG9VB8dXAxw4iQDoKVQ7ChJRB6ZtsCsX3Jse1PEUlHrJiyQrOTg==} + engines: {node: '>= 16'} + + '@intlify/message-compiler@10.0.4': + resolution: {integrity: sha512-AFbhEo10DP095/45EauinQJ5hJ3rJUmuuqltGguvc3WsvezZN+g8qNHLGWKu60FHQVizMrQY7VJ+zVlBXlQQkQ==} + engines: {node: '>= 16'} + + '@intlify/shared@10.0.4': + resolution: {integrity: sha512-ukFn0I01HsSgr3VYhYcvkTCLS7rGa0gw4A4AMpcy/A9xx/zRJy7PS2BElMXLwUazVFMAr5zuiTk3MQeoeGXaJg==} + engines: {node: '>= 16'} + '@isaacs/cliui@8.0.2': resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==} engines: {node: '>=12'} @@ -3149,9 +3167,6 @@ packages: import-from-string@0.0.4: resolution: {integrity: sha512-ZmtWHOGv55OEFb3HxfQH4L4vAR7g3HUm82N5LmvXugiXlaZ1j/epItoUDjQ+gJ+MjNl+apczmCnqGFq8q2CM6w==} - import-meta-resolve@3.1.1: - resolution: {integrity: sha512-qeywsE/KC3w9Fd2ORrRDUw6nS/nLwZpXgfrOc2IILvZYnCaEMd+D56Vfg9k4G29gIeVi3XKql1RQatME8iYsiw==} - import-meta-resolve@4.1.0: resolution: {integrity: sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==} @@ -4889,6 +4904,12 @@ packages: vue-flow-layout@0.0.5: resolution: {integrity: sha512-lZlqQ/Se1trGMtBMneZDWaiQiQBuxU8ivZ+KpJMem5zKROFpzuPq9KqyWABbSYbxq0qhqZs1I4DBwrY041rtOA==} + vue-i18n@10.0.4: + resolution: {integrity: sha512-1xkzVxqBLk2ZFOmeI+B5r1J7aD/WtNJ4j9k2mcFcQo5BnOmHBmD7z4/oZohh96AAaRZ4Q7mNQvxc9h+aT+Md3w==} + engines: {node: '>= 16'} + peerDependencies: + vue: ^3.0.0 + vue-page-stack@3.2.0: resolution: {integrity: sha512-MSv1usz6BdfyIH1JLd+9RgQPl42lMl3k9VGnXPq90odG31Y8l62gFjZaVSy/URJSc0Ya46TBX4FwrpJ4odon9A==} peerDependencies: @@ -5687,6 +5708,18 @@ snapshots: transitivePeerDependencies: - supports-color + '@intlify/core-base@10.0.4': + dependencies: + '@intlify/message-compiler': 10.0.4 + '@intlify/shared': 10.0.4 + + '@intlify/message-compiler@10.0.4': + dependencies: + '@intlify/shared': 10.0.4 + source-map-js: 1.2.1 + + '@intlify/shared@10.0.4': {} + '@isaacs/cliui@8.0.2': dependencies: string-width: 5.1.2 @@ -8384,12 +8417,9 @@ snapshots: import-from-string@0.0.4: dependencies: esbuild: 0.19.12 - import-meta-resolve: 3.1.1 + import-meta-resolve: 4.1.0 - import-meta-resolve@3.1.1: {} - - import-meta-resolve@4.1.0: - optional: true + import-meta-resolve@4.1.0: {} importx@0.4.4: dependencies: @@ -10276,6 +10306,13 @@ snapshots: transitivePeerDependencies: - typescript + vue-i18n@10.0.4(vue@3.5.12(typescript@5.6.3)): + dependencies: + '@intlify/core-base': 10.0.4 + '@intlify/shared': 10.0.4 + '@vue/devtools-api': 6.6.4 + vue: 3.5.12(typescript@5.6.3) + vue-page-stack@3.2.0(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3)): dependencies: '@vue/shared': 3.5.11 diff --git a/src/main.ts b/src/main.ts index 3bbd311..c8a6e62 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,6 +4,7 @@ import 'virtual:uno.css'; import { createHead } from '@unhead/vue'; import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'; +import { createI18n } from 'vue-i18n'; import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders'; import App from './App.vue'; @@ -29,7 +30,25 @@ async function init() { // Register the plugin before the router .use(DataLoaderPlugin, { router }) // adding the router will trigger the initial navigation - .use(router); + .use(router) + .use( + createI18n({ + locale: 'zh_CN', // 默认显示语言 + fallbackLocale: 'zh_CN', + messages: { + en_US: { + message: { + hello: 'hello', + }, + }, + zh_CN: { + message: { + hello: '你好', + }, + }, + }, + }), + ); app.config.globalProperties.$__DEV__ = $__DEV__; app.mount('#app'); } diff --git a/src/pages/index-page.vue b/src/pages/index-page.vue index 7c1818a..734d997 100644 --- a/src/pages/index-page.vue +++ b/src/pages/index-page.vue @@ -15,15 +15,23 @@ definePage({ }); import type { FunctionalComponent } from 'vue'; +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) => ( - <> -
- This is a functional component with prop: {JSON.stringify(props)} -
- + // <> +
+ This is a functional component with prop: {JSON.stringify(props)} +
+ // ); @@ -36,7 +44,16 @@ const FComponent: FunctionalComponent<{ prop: string }> = (props, context) => (
  • 中文-页面.page.vue
  • Api
    • - + +
    + +

    {{ $t('message.hello') }}

    +
    + +
    diff --git a/typed-router.d.ts b/typed-router.d.ts index 45be021..da6dcb6 100644 --- a/typed-router.d.ts +++ b/typed-router.d.ts @@ -19,6 +19,7 @@ declare module 'vue-router/auto-routes' { */ export interface RouteNamedMap { '中文页面': RouteRecordInfo<'中文页面', '/中文-页面', Record, Record>, + 'A': RouteRecordInfo<'A', '/a', Record, Record>, 'AA': RouteRecordInfo<'AA', '/a/a', Record, Record>, 'Api': RouteRecordInfo<'Api', '/api', Record, Record>, 'DataLoadersId': RouteRecordInfo<'DataLoadersId', '/data-loaders/:id', { id: ParamValue }, { id: ParamValue }>,