Nuxt 翻译管理器
一个简单易用的 nuxt
和 nuxt-i18n
翻译管理器,允许从单个 CSV 文件管理翻译。
Nuxt v4 准备就绪
✨
对于 Nuxt V4 示例,您可以查看此使用 Nuxt V4 && nuxt-i18n 模块 的入门项目
特性
- 从单个 CSV 文件管理翻译
- CSV 文件更新时,热模块重新加载
快速设置
- 将
nuxt-translation-manager
依赖项添加到您的项目中
npx nuxi@latest module add translation-manager
手动安装
- 将
nuxt-translation-manager
依赖项添加到您的项目中
npm install -D nuxt-translation-manager
pnpm install -D nuxt-translation-manager
yarn add -D nuxt-translation-manager
- 将
nuxt-translation-manager
添加到nuxt.config.ts
文件的modules
部分
export default defineNuxtConfig({
modules: ['nuxt-translation-manager']
})
就是这样!您现在可以在您的 Nuxt 应用中使用 Nuxt 翻译管理器 ✨
用法
在您的 langDir
中创建 translations.csv
文件
echo 'Key,"en-US","es-ES","ca-ES"
login,"Login","Acceder","Accedir"' > path-to-your-langDir/translations.csv
# replace `path-to-your-langDir`
这将生成一个如下所示的 CSV 文件
键 | en-US | fr | de |
---|---|---|---|
hello | Hello | Bonjour | Hallo |
goodbye | Goodbye | Au revoir | Auf Wiedersehen |
thanks | Thanks | Merci | Danke |
**请务必使用** lang-code
**格式作为表头行,例如** es-ES
**请务必在您的 CSV 编辑器中设置合适的分割符(默认情况下为逗号)** ,
**您可以在 CSV 文件中使用注释**,使用 #
✨ 提示:您可以使用 VSCode 的 Edit CSV 扩展 在 vscode
中管理您的 CSV 文件
查看原始 CSV 代码
Key,"English, en-US","French, fr","German, de"
hello,"Hello","Bonjour","Hallo"
goodbye,"Goodbye","Au revoir","Auf Wiedersehen"
thanks,"Thanks","Merci","Danke"
# COMMENTS TEST
comment-test,"Comment test","Test comentario","Test comentari"
### MULTILINE COMMENT ###
### ANOTHER COMMENT ####
comment-multi,"Comment test","Test comentario","Test comentari"
选项
// config key
export default defineNuxtConfig({
'translation-manager': {}
})
interface ModuleOptions {
/**
* nuxt-i18n lang dir
*
* @default 'locales'
*/
langDir?: string
/**
* csv file name without .csv file extension
*
* @default 'translations'
*/
translationFileName?: string
/**
* where to store json files
*
* @default 'langDir'
*/
outputDir?: string
/**
* csv separator character
*
* @default ','
*/
separator?: string
}
开发
# Install dependencies
pnpm install
# Generate type stubs
pnpm run dev:prepare
# Develop with the playground
pnpm run dev
# Build the playground
pnpm run dev:build
# Run ESLint
pnpm run lint
# Run Vitest
pnpm run test
pnpm run test:watch
# Release new version
pnpm run release
致谢
受 Danny Connell 编写的 Quasalang CLI 启发