@ymir-labs/vite-plugin-ymir-config
v0.0.41
Published
尤弥尔识别配置vite插件
Downloads
8
Readme
@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') // 获取到应用名称