vue3+vite+ts怎么创建字典

在 Vue3 中结合 Vite 和 TypeScript 创建一个动态字典（通常用于本地化的翻译），你可以按照以下步骤操作：

1. **安装依赖**:
- 安装 `vue-i18n` 或者 `vue-tanslate` 等库处理国际化，它们都支持 TypeScript 支持。

   npm install vue-i18n @vuejs/composition-api --save
   // 或者
   npm install vue-translate @vueuse/core --save

2. **配置项目**:
使用 Vite 的配置文件 `.viteignore` 和 `vite.config.ts` 配置国际化资源目录。

   import { defineConfig } from 'vite';
   export default defineConfig({
     build: {
       outDir: './dist',
     },
     plugins: [
       // 如果选择 vue-i18n
       require('@vitejs/plugin-vue').create({
         compilerOptions: {
           jsx: true,
         },
       }),
       viteI18nPlugin(), // 根据你的库导入相应的插件配置
     ],
   });

3. **创建字典文件**:
在 `src/locale` 目录下创建一个 TypeScript 文件，比如 `en-US.ts` 或 `zh-CN.ts`，里面存储你的翻译数据。

   // en-US.ts
   export const messages: Record<string, string> = {
     GREETING: 'Hello, World!',
   };

   // zh-CN.ts
   export const messages: Record<string, string> = {
     GREETING: '你好，世界！',
   };

4. **在组件中使用**:
使用 `vue-i18n` 或 `vue-translate` 提供的 API 来访问并显示字典内容。

   import { useTranslation } from 'vue-i18n'; // 或者 import { useTranslate } from '@vueuse/core';

   export default {
     setup() {
       const { t } = useTranslation(); // 或者 const translate = useTranslate();
       
       return () => <h1>{t('GREETING')}</h1>; // 显示 "Hello, World!" 或者 "你好，世界！"，取决于当前的语言设置
     }
   };