@ymir-labs/vite-plugin-ymir-config

@ymir-labs/vite-plugin-ymir-config

识别 src/locales 中的配置，包括i18n配置。

特性：

• 自动识别 src/locales 中定义的应用配置
• 支持多语言机制（i18n）
• 异步加载多语言配置（vue-i18n中称作消息）
• 与 @ymir-labs/pro/config 组合使用，提供完备的 TypeScript 体验

开始使用

安装：

pnpm add -D @ymir-labs/vite-plugin-ymir-config

在 vite.config.ts 中添加以下配置：

import YmirConfig from '@ymir-labs/vite-plugin-ymir-config'

defineConfig({
  plugins: [YmirConfig()]
})

在 main.ts 中的使用：

import { setupApp } from '@ymir-labs/pro/setup'
import config from 'virtual:generated-config'
import App from './App.vue'

setupApp(App, { ...config, routes })

src/locales 规范

文件夹结构

src/locales/
|-- default.ts      <---- 默认的配置
|-- zh-cn.ts        <---- 中文语言配置
|-- en.ts           <---- 英语语言配置
|-- de.ts           <---- 德语语言配置
|-- ja.ts           <---- 日语语言配置

其中 default.ts 是默认配置，放一些公共的应用配置。

一个语种配置对应一个 ts 文件，语种名称与 ts 文件名称一致。

配置文件结构

配置文件必须要导出 config 变量。示例：

import type { YmirAppConfig } from '@ymir-labs/pro/config'

export const config: YmirAppConfig = {
  system: {
    title: '应用名称'
  }
}

切换语种

import { useI18n } from '@ymir-labs/pro/config'

const { locale, setLocale } = useI18n()

// 加载 de.ts 配置，并切换为德语配置
await setLocale('de')

获取配置

使用 @ymir-labs/pro/config 提供的 t 函数获取配置：

import { t } from '@ymir-labs/pro/config'

const message = t('system.title') // 获取到应用名称